emoji-safe encoding? (#22)

Author: james-elicx

app/api/bucket/[bucket]/[key]/route.ts

@@ -1,5 +1,6 @@
 import { getBucket } from '@/utils/cf';
 import { getSettingsRecord } from '@/utils/db/queries';
+import { decode } from '@/utils/encoding';
 
 export const runtime = 'edge';
 
@@ -14,7 +15,7 @@ export const GET = async (
 		return new Response('Unable to read bucket', { status: 400 });
 	}
 
-	const path = atob(key);
+	const path = decode(key);
 
 	const [, start, end] = /^bytes=(\d+)-(\d+)?$/.exec(req.headers.get('range') ?? '') ?? [];
 
@@ -73,7 +74,7 @@ export const POST = async (
 		return new Response('Unable to read bucket', { status: 400 });
 	}
 
-	const path = atob(key);
+	const path = decode(key);
 
 	const object = await bucket.head(path);
 

components/object-explorer/object-preview-inner.tsx

@@ -2,6 +2,7 @@ import { addLeadingSlash } from '@/utils';
 import type { FileType } from '@/utils';
 import { memo } from 'react';
 import { twMerge } from 'tailwind-merge';
+import { encode } from '@/utils/encoding';
 import { useLocation } from '../providers';
 import { getFileIcon } from './file-icons';
 
@@ -21,7 +22,7 @@ export const ObjectPreviewInner = memo(
 		const { currentBucket } = useLocation();
 		if (!currentBucket || !path || !itemType) return null;
 
-		const itemApiSrc = `/api/bucket/${currentBucket?.raw}${addLeadingSlash(btoa(path))}`;
+		const itemApiSrc = `/api/bucket/${currentBucket?.raw}${addLeadingSlash(encode(path))}`;
 
 		switch (itemType) {
 			case 'image': {

components/object-explorer/object-preview.tsx

@@ -14,6 +14,7 @@ import {
 	MediaTimeRange,
 	MediaVolumeRange,
 } from 'media-chrome/react';
+import { encode } from '@/utils/encoding';
 import { useLocation, useObjectExplorer } from '../providers';
 
 export const ObjectPreview = (): JSX.Element => {
@@ -31,7 +32,7 @@ export const ObjectPreview = (): JSX.Element => {
 	const [objectStr, setObjectStr] = useState<string | null>(null);
 
 	const rawPreviewKey = selectedObjects.keys().next().value;
-	const previewKey = rawPreviewKey ? btoa(rawPreviewKey) : undefined;
+	const previewKey = rawPreviewKey ? encode(rawPreviewKey) : undefined;
 
 	useEffect(() => {
 		if (!isPreviewActive || !currentBucket) return;

utils/encoding.ts

@@ -0,0 +1,3 @@
+export const encode = (v: string) => btoa(encodeURIComponent(v));
+
+export const decode = (v: string) => atob(decodeURIComponent(v));