feat: implement file existence check and improve file upload handling

src/lib/storage/storage.adapter.ts

@@ -2,6 +2,7 @@ import { StorageProvider } from '@/lib/storage/storage.interface';
 import { TypedResult, wrap } from '@/utils/types/results';
 import {
     DeleteObjectCommand,
+    HeadObjectCommand,
     ObjectCannedACL,
     PutObjectCommand,
     S3Client,
@@ -36,6 +37,9 @@ export class S3StorageAdapter implements StorageProvider {
     readonly put: (
         ...args: Parameters<StorageProvider['put']>
     ) => Promise<TypedResult<string>>;
+    readonly exists: (
+        ...args: Parameters<StorageProvider['exists']>
+    ) => Promise<boolean>;
     readonly delete: (
         ...args: Parameters<StorageProvider['delete']>
     ) => Promise<TypedResult<void>>;
@@ -58,6 +62,7 @@ export class S3StorageAdapter implements StorageProvider {
         this.get = wrap(this._get.bind(this));
         this.put = wrap(this._put.bind(this));
         this.delete = wrap(this._delete.bind(this));
+        this.exists = this._exists.bind(this);
     }
 
     private async _get(key: string): Promise<string> {
@@ -75,6 +80,20 @@ export class S3StorageAdapter implements StorageProvider {
         return await getSignedUrl(this.s3Client, command, { expiresIn: 3600 });
     }
 
+    private async _exists(key: string): Promise<boolean> {
+        try {
+            await this.s3Client.send(
+                new HeadObjectCommand({
+                    Bucket: this.bucketName,
+                    Key: key,
+                })
+            );
+            return true;
+        } catch {
+            return false;
+        }
+    }
+
     private async _delete(key: string): Promise<void> {
         await this.s3Client.send(
             new DeleteObjectCommand({

src/lib/storage/storage.external.ts

@@ -16,6 +16,16 @@ export const getSignedUrl = async (
     return await storageProvider.get(key);
 };
 
+export const checkExists = async (
+    key: string,
+    storageProvider?: StorageProvider
+): Promise<boolean> => {
+    if (!storageProvider) {
+        storageProvider = storage;
+    }
+    return await storageProvider.exists(key);
+};
+
 export const getPutUrl = async (
     key: string,
     contentType: string,

src/lib/storage/storage.interface.ts

@@ -28,6 +28,12 @@ export interface StorageProvider {
      */
     put(key: string, contentType: string): Promise<TypedResult<string>>;
 
+    /**
+     * Checks whether a file exists in storage
+     * @param key - The unique key/path of the file to check
+     */
+    exists(key: string): Promise<boolean>;
+
     /**
      * Deletes a file from storage
      * @param key - The unique key/path of the file to delete

src/lib/storage/storage.utils.ts

@@ -11,18 +11,36 @@ export const FileUploadResp = z.object({
 });
 export type FileUploadResp = z.infer<StorageProvider>;
 
+async function hashFile(file: File): Promise<string> {
+    const buffer = await file.arrayBuffer();
+    const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
+    const hex = Array.from(new Uint8Array(hashBuffer))
+        .map((b) => b.toString(16).padStart(2, '0'))
+        .join('');
+    const ext = file.name.split('.').pop();
+    return ext ? `${hex}.${ext}` : hex;
+}
+
 export const uploadFile = wrap(async (file: File) => {
-    const uniqueFileKey = crypto.randomUUID();
+    const fileKey = await hashFile(file);
-    const result = await storage.getPutUrl(uniqueFileKey, file.type);
+
+    const existsResult = await storage.checkExists(fileKey);
+    if (existsResult) {
+        const presignedUrl = await storage.getSignedUrl(fileKey);
+        if (!presignedUrl.ok) {
+            throw new Error('Failed to retrieve file URL');
+        }
+        return { signedUrl: presignedUrl.value, key: fileKey };
+    }
+
+    const result = await storage.getPutUrl(fileKey, file.type);
     if (!result.ok) {
         throw new Error('File upload failed');
     }
 
     const response = await fetch(result.value, {
         method: 'PUT',
-        headers: {
+        headers: { 'Content-Type': file.type },
-            'Content-Type': file.type,
-        },
         body: file,
     });
 
@@ -30,12 +48,9 @@ export const uploadFile = wrap(async (file: File) => {
         throw new Error('Failed to upload file');
     }
 
-    const presignedUrl = await storage.getSignedUrl(uniqueFileKey);
+    const presignedUrl = await storage.getSignedUrl(fileKey);
     if (!presignedUrl.ok) {
         throw new Error('Failed to retrieve file URL');
     }
-    return {
+    return { signedUrl: presignedUrl.value, key: fileKey };
-        signedUrl: presignedUrl.value,
-        key: uniqueFileKey,
-    };
 });

src/ui/components/internal/create-article-form.tsx

@@ -80,7 +80,10 @@ export const CreateArticleForm = () => {
     });
 
     const title = useWatch({ control: form.control, name: 'title' });
-    const coverImageUrl = useWatch({ control: form.control, name: 'coverImageUrl' });
+    const coverImageUrl = useWatch({
+        control: form.control,
+        name: 'coverImageUrl',
+    });
     useEffect(() => {
         if (!title) return;
         form.setValue('slug', slugify(title).toLowerCase());

src/ui/components/internal/file-upload-field.tsx

@@ -6,7 +6,6 @@ import {
     FieldDescription,
     FieldError,
 } from '@/ui/components/shadcn/field';
-import { Spinner } from '@/ui/components/shadcn/spinner';
 import {
     FileUpload,
     FileUploadDropzone,
@@ -17,6 +16,7 @@ import {
     FileUploadList,
     FileUploadTrigger,
 } from '@/ui/components/shadcn/file-upload';
+import { Spinner } from '@/ui/components/shadcn/spinner';
 import { X } from 'lucide-react';
 import React, { useCallback } from 'react';
 

src/ui/components/internal/header/desktop-header/dynamic-desktop-header.tsx

@@ -18,9 +18,24 @@ export const DynamicDesktopHeader = () => {
     const user = sessionData?.user;
 
     const links = [
-        { href: '/home', label: 'Home', condition: true, active: pathname === '/home' },
+        {
-        { href: '/about', label: 'About', condition: true, active: pathname === '/about' },
+            href: '/home',
-        { href: '/admin', label: 'Admin', condition: !!user, active: pathname === '/admin' },
+            label: 'Home',
+            condition: true,
+            active: pathname === '/home',
+        },
+        {
+            href: '/about',
+            label: 'About',
+            condition: true,
+            active: pathname === '/about',
+        },
+        {
+            href: '/admin',
+            label: 'Admin',
+            condition: !!user,
+            active: pathname === '/admin',
+        },
     ];
 
     const userButton = !!user ? <UserButton user={user} /> : <div />;