fix: use same validation in server and client

Author: ivan-dalmet

src/components/Form/FieldUpload/FieldUpload.spec.tsx

@@ -17,7 +17,7 @@ const mockFile: FieldUploadValue = {
   file: mockFileRaw,
   lastModified: mockFileRaw.lastModified,
   lastModifiedDate: new Date(mockFileRaw.lastModified),
-  size: mockFileRaw.size.toString(),
+  size: mockFileRaw.size,
   type: mockFileRaw.type,
   name: mockFileRaw.name ?? '',
 };
@@ -28,7 +28,7 @@ test('update value', async () => {
 
   render(
     <FormMocked
-      schema={z.object({ file: zFieldUploadValue().optional() })}
+      schema={z.object({ file: zFieldUploadValue('avatar').optional() })}
       useFormOptions={{ defaultValues: { file: undefined } }}
       onSubmit={mockedSubmit}
     >
@@ -59,7 +59,7 @@ test('default value', async () => {
 
   render(
     <FormMocked
-      schema={z.object({ file: zFieldUploadValue().optional() })}
+      schema={z.object({ file: zFieldUploadValue('avatar').optional() })}
       useFormOptions={{
         values: {
           file: mockFile,

src/components/Form/FieldUpload/docs.stories.tsx

@@ -16,7 +16,7 @@ export default {
 type FormSchema = z.infer<ReturnType<typeof zFormSchema>>;
 const zFormSchema = () =>
   z.object({
-    file: zFieldUploadValue().optional(),
+    file: zFieldUploadValue('avatar').optional(),
   });
 
 const formOptions = {

src/features/account/schemas.ts

@@ -45,5 +45,5 @@ export const zFormFieldsAccountProfile = () =>
       language: true,
     })
     .extend({
-      image: zFieldUploadValue(['image']).nullish(),
+      image: zFieldUploadValue('avatar').nullish(),
     });

src/lib/s3/client.ts

@@ -21,7 +21,7 @@ export const useUploadFileMutation = (
           ...params.getMetadata?.(file),
         }),
         collection,
-        fileType: file.type,
+        type: file.type,
         size: file.size,
         name: file.name,
       });

src/lib/s3/config.ts

@@ -2,21 +2,22 @@ import { z } from 'zod';
 
 import { User } from '@/features/users/schemas';
 
-export type FilesCollection = z.infer<ReturnType<typeof zFilesCollection>>;
-export const zFilesCollection = () => z.enum(['avatar']);
+export type FilesCollectionName = z.infer<
+  ReturnType<typeof zFilesCollectionName>
+>;
+export const zFilesCollectionName = () => z.enum(['avatar']);
 
 // TODO Also use this config in form validation
 export const FILES_COLLECTIONS_CONFIG = {
   avatar: {
     getKey: ({ user }) => `avatars/${user.id}`,
-    fileTypes: ['image/png', 'image/jpg', 'image/jpeg'],
+    allowedTypes: ['image/png', 'image/jpg', 'image/jpeg'],
     maxSize: 1 * 1024 * 1024, // 5MB in bytes,
   },
-} satisfies Record<
-  FilesCollection,
-  {
-    getKey: (params: { user: User }) => string;
-    fileTypes?: Array<string>;
-    maxSize?: number;
-  }
->;
+} satisfies Record<FilesCollectionName, FilesCollectionConfig>;
+
+export type FilesCollectionConfig = {
+  getKey: (params: { user: User }) => string;
+  allowedTypes?: Array<string>;
+  maxSize?: number;
+};

src/lib/s3/schemas.ts

@@ -1,43 +1,43 @@
 import { t } from 'i18next';
 import { z } from 'zod';
 
-import { zFilesCollection } from '@/lib/s3/config';
+import { getFieldPath } from '@/lib/form/getFieldPath';
+import {
+  FILES_COLLECTIONS_CONFIG,
+  FilesCollectionName,
+  zFilesCollectionName,
+} from '@/lib/s3/config';
+import { validateFile } from '@/lib/s3/utils';
 import { zu } from '@/lib/zod/zod-utils';
 
-export type UploadFileType = z.infer<typeof zUploadFileType>;
-export const zUploadFileType = z.enum(['image', 'application/pdf']);
-
 export type FieldMetadata = z.infer<ReturnType<typeof zFieldMetadata>>;
 export const zFieldMetadata = () =>
   z.object({
     fileUrl: zu.string.nonEmptyNullish(z.string()),
     lastModifiedDate: z.date().optional(),
     name: zu.string.nonEmptyNullish(z.string()),
-    size: zu.string.nonEmptyNullish(z.string()),
+    size: z.coerce.number().nullish(),
     type: zu.string.nonEmptyNullish(z.string()),
   });
 
 export type FieldUploadValue = z.infer<ReturnType<typeof zFieldUploadValue>>;
-export const zFieldUploadValue = (acceptedTypes?: UploadFileType[]) =>
+export const zFieldUploadValue = (collection: FilesCollectionName) =>
   zFieldMetadata()
     .extend({
       file: z.instanceof(File).optional(),
       lastModified: z.number().optional(),
     })
-    .refine(
-      (file) => {
-        if (!acceptedTypes || acceptedTypes.length === 0) {
-          return true;
-        }
+    .superRefine((input, ctx) => {
+      const config = FILES_COLLECTIONS_CONFIG[collection];
+      const validateFileReturn = validateFile({ input, config });
 
-        return acceptedTypes.some((type) => file.type?.startsWith(type));
-      },
-      {
-        message: t('common:files.invalid', {
-          acceptedTypes: acceptedTypes?.join(', '),
-        }),
+      if (!validateFileReturn.success) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: t(`files.errors.${validateFileReturn.error.key}`),
+        });
       }
-    );
+    });
 
 export type UploadSignedUrlInput = z.infer<
   ReturnType<typeof zUploadSignedUrlInput>
@@ -49,9 +49,9 @@ export const zUploadSignedUrlInput = () =>
      */
     metadata: z.string().optional(),
     name: z.string(),
-    fileType: z.string(),
+    type: z.string(),
     size: z.number(),
-    collection: zFilesCollection(),
+    collection: zFilesCollectionName(),
   });
 export type UploadSignedUrlOutput = z.infer<
   ReturnType<typeof zUploadSignedUrlOutput>

src/lib/s3/utils.ts

@@ -0,0 +1,44 @@
+import { FilesCollectionConfig } from '@/lib/s3/config';
+import { FieldMetadata } from '@/lib/s3/schemas';
+
+type ValidateReturn =
+  | { success: true }
+  | {
+      success: false;
+      error: {
+        message: string;
+        key: 'tooLarge' | 'typeNotAllowed';
+      };
+    };
+
+export const validateFile = (params: {
+  input: FieldMetadata;
+  config: FilesCollectionConfig;
+}): ValidateReturn => {
+  if (
+    params.config.maxSize &&
+    (params.input.size ?? 0) >= params.config.maxSize
+  ) {
+    return {
+      error: {
+        key: 'tooLarge',
+        message: `File size is too big ${params.input.size}/${params.config.maxSize}`,
+      },
+      success: false,
+    };
+  }
+
+  if (
+    params.config.allowedTypes &&
+    !params.config.allowedTypes.includes(params.input.type ?? '')
+  ) {
+    return {
+      error: {
+        key: 'typeNotAllowed',
+        message: `Incorrect file type ${params.input.type} (authorized: ${params.config.allowedTypes.join(',')})`,
+      },
+      success: false,
+    };
+  }
+  return { success: true };
+};

src/locales/ar/common.json

@@ -22,5 +22,11 @@
   },
   "filter": "منقي",
   "clear": "واضح",
-  "submit": "يُقدِّم"
+  "submit": "يُقدِّم",
+  "files": {
+    "errors": {
+      "tooLarge": "ملف كبير جدا",
+      "typeNotAllowed": "نوع الملف غير مسموح به"
+    }
+  }
 }

src/locales/en/common.json

@@ -21,7 +21,10 @@
     "cancelText": "Stay on the page"
   },
   "files": {
-    "invalid": "Provided file must be of type : {{acceptedTypes}}"
+    "errors": {
+      "tooLarge": "File too large",
+      "typeNotAllowed": "File type not allowed"
+    }
   },
   "filter": "Filter",
   "clear": "Clear",

src/locales/fr/common.json

@@ -20,10 +20,13 @@
     "message": "Vous êtes sur le point de quitter la page sans sauvegarder vos modifications.",
     "title": "Quitter la page ?"
   },
-  "files": {
-    "invalid": "Le fichier doit être de type : {{acceptedTypes}}"
-  },
   "filter": "Filtrer",
   "clear": "Effacer",
-  "submit": "Soumettre"
+  "submit": "Soumettre",
+  "files": {
+    "errors": {
+      "tooLarge": "Fichier trop lourd",
+      "typeNotAllowed": "Type de fichier non autorisé"
+    }
+  }
 }

src/locales/sw/common.json

@@ -22,5 +22,11 @@
   },
   "filter": "Chuja",
   "clear": "Wazi",
-  "submit": "Wasilisha"
+  "submit": "Wasilisha",
+  "files": {
+    "errors": {
+      "tooLarge": "Faili kubwa sana",
+      "typeNotAllowed": "Aina ya faili hairuhusiwi"
+    }
+  }
 }

src/server/config/s3.ts

@@ -6,11 +6,7 @@ import {
 import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
 
 import { env } from '@/env.mjs';
-import {
-  FieldMetadata,
-  UploadFileType,
-  UploadSignedUrlOutput,
-} from '@/lib/s3/schemas';
+import { FieldMetadata, UploadSignedUrlOutput } from '@/lib/s3/schemas';
 
 const SIGNED_URL_EXPIRATION_TIME_SECONDS = 60; // 1 minute
 
@@ -24,8 +20,6 @@ const S3 = new S3Client({
 });
 
 type UploadSignedUrlOptions = {
-  allowedFileTypes?: UploadFileType[];
-  expiresIn?: number;
   /** The tree structure of the file in S3 */
   key: string;
   metadata?: Record<string, string>;
@@ -41,7 +35,7 @@ export const getS3UploadSignedUrl = async (
       Key: options.key,
       Metadata: options.metadata,
     }),
-    { expiresIn: options.expiresIn ?? SIGNED_URL_EXPIRATION_TIME_SECONDS }
+    { expiresIn: SIGNED_URL_EXPIRATION_TIME_SECONDS }
   );
 
   return {
@@ -62,7 +56,7 @@ export const fetchFileMetadata = async (key: string) => {
 
     return {
       fileUrl,
-      size: fileResponse.ContentLength?.toString(),
+      size: fileResponse.ContentLength,
       type: fileResponse.ContentType,
       lastModifiedDate: fileResponse.LastModified
         ? new Date(fileResponse.LastModified)

src/server/routers/files.ts

@@ -1,11 +1,13 @@
 import { TRPCError } from '@trpc/server';
+import { t } from 'i18next';
 import { parse } from 'superjson';
 
 import { FILES_COLLECTIONS_CONFIG } from '@/lib/s3/config';
 import {
   zUploadSignedUrlInput,
   zUploadSignedUrlOutput,
 } from '@/lib/s3/schemas';
+import { validateFile } from '@/lib/s3/utils';
 import { getS3UploadSignedUrl } from '@/server/config/s3';
 import { createTRPCRouter, protectedProcedure } from '@/server/config/trpc';
 
@@ -31,17 +33,12 @@ export const filesRouter = createTRPCRouter({
         });
       }
 
-      if (config.maxSize && input.size >= config.maxSize) {
-        throw new TRPCError({
-          code: 'BAD_REQUEST',
-          message: `File size is too big ${input.size}/${config.maxSize}`,
-        });
-      }
+      const validateFileResult = validateFile({ input, config });
 
-      if (config.fileTypes && !config.fileTypes.includes(input.fileType)) {
+      if (!validateFileResult.success) {
         throw new TRPCError({
           code: 'BAD_REQUEST',
-          message: `Incorrect file type ${input.fileType} (authorized: ${config.fileTypes.join(',')})`,
+          message: validateFileResult.error.message,
         });
       }