fix: extract mime type

Author: DecampsRenan

src/features/book/manager/form-book-cover.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { join } from 'remeda';
 
 import { orpc } from '@/lib/orpc/client';
 
@@ -12,7 +13,10 @@ import {
 import { UploadButton } from '@/components/ui/upload-button';
 
 import { BookCover } from '@/features/book/book-cover';
-import { FormFieldsBook } from '@/features/book/schema';
+import {
+  bookCoverAcceptedFileTypes,
+  FormFieldsBook,
+} from '@/features/book/schema';
 
 export const FormBookCover = () => {
   const { t } = useTranslation(['book']);
@@ -61,7 +65,7 @@ export const FormBookCover = () => {
                 <UploadButton
                   uploadRoute="bookCover"
                   inputProps={{
-                    accept: 'image/png, image/jpeg, image/webp, image/gif',
+                    accept: join(bookCoverAcceptedFileTypes, ','),
                   }}
                   className="absolute top-1/2 left-1/2 -translate-1/2 bg-black/50 text-white"
                   variant="ghost"

src/features/book/schema.ts

@@ -24,3 +24,10 @@ export const zFormFieldsBook = () =>
   zBook()
     .pick({ title: true, author: true, publisher: true, coverId: true })
     .extend({ genreId: zu.fieldText.required() });
+
+export const bookCoverAcceptedFileTypes = [
+  'image/png',
+  'image/jpeg',
+  'image/webp',
+  'image/gif',
+];

src/routes/api/upload.ts

@@ -1,62 +1,16 @@
-import {
-  handleRequest,
-  RejectUpload,
-  route,
-  type Router,
-} from '@better-upload/server';
+import { handleRequest, type Router } from '@better-upload/server';
 import { createFileRoute } from '@tanstack/react-router';
 
-import i18n from '@/lib/i18n';
 import { uploadClient } from '@/lib/s3';
 
 import { envServer } from '@/env/server';
-import { auth } from '@/server/auth';
+import { bookCover } from '@/server/upload/book-cover';
 
 const router = {
   client: uploadClient,
   bucketName: envServer.S3_BUCKET_NAME,
   routes: {
-    bookCover: route({
-      // [TODO] Check to find a way to extract these rules so they can be reused in the accept field of file inputs
-      fileTypes: ['image/png', 'image/jpeg', 'image/webp', 'image/gif'],
-      maxFileSize: 1024 * 1024 * 100, // 100Mb
-      onBeforeUpload: async ({ req, file }) => {
-        const session = await auth.api.getSession(req);
-        if (!session?.user) {
-          throw new RejectUpload(
-            i18n.t('book:manager.uploadErrors.NOT_AUTHENTICATED')
-          );
-        }
-
-        // Only admins should be able to update book covers
-        const canUpdateBookCover = await auth.api.userHasPermission({
-          body: {
-            userId: session.user.id,
-            permissions: {
-              book: ['create', 'update'],
-            },
-            role: 'admin',
-          },
-        });
-
-        if (!canUpdateBookCover.success) {
-          throw new RejectUpload(
-            i18n.t('book:manager.uploadErrors.UNAUTHORIZED')
-          );
-        }
-
-        // normalize file extension from detected mimetype (file.type)
-        const fileExtension = file.type.split('/').at(-1) as string;
-        return {
-          // I think it is a good idea to create a random file id
-          // This allow us to invalidate cache (because the id will always be random)
-          // and it also prevent the user to upload a file with the same name (aka. objectKey), but different file content
-          objectInfo: {
-            key: `books/${crypto.randomUUID()}.${fileExtension}`,
-          },
-        };
-      },
-    }),
+    bookCover,
   },
 } as const satisfies Router;
 

src/server/upload/book-cover.ts

@@ -0,0 +1,45 @@
+import { RejectUpload, route } from '@better-upload/server';
+
+import i18n from '@/lib/i18n';
+
+import { bookCoverAcceptedFileTypes } from '@/features/book/schema';
+import { auth } from '@/server/auth';
+
+export const bookCover = route({
+  fileTypes: bookCoverAcceptedFileTypes,
+  maxFileSize: 1024 * 1024 * 100, // 100Mb
+  onBeforeUpload: async ({ req, file }) => {
+    const session = await auth.api.getSession(req);
+    if (!session?.user) {
+      throw new RejectUpload(
+        i18n.t('book:manager.uploadErrors.NOT_AUTHENTICATED')
+      );
+    }
+
+    // Only admins should be able to update book covers
+    const canUpdateBookCover = await auth.api.userHasPermission({
+      body: {
+        userId: session.user.id,
+        permissions: {
+          book: ['create', 'update'],
+        },
+        role: 'admin',
+      },
+    });
+
+    if (!canUpdateBookCover.success) {
+      throw new RejectUpload(i18n.t('book:manager.uploadErrors.UNAUTHORIZED'));
+    }
+
+    // normalize file extension from detected mimetype (file.type)
+    const fileExtension = file.type.split('/').at(-1) as string;
+    return {
+      // I think it is a good idea to create a random file id
+      // This allow us to invalidate cache (because the id will always be random)
+      // and it also prevent the user to upload a file with the same name (aka. objectKey), but different file content
+      objectInfo: {
+        key: `books/${crypto.randomUUID()}.${fileExtension}`,
+      },
+    };
+  },
+});