fix(file-upload): Feedback + more simplifcation

Author: ntatoud

src/features/account/service.ts

@@ -8,14 +8,14 @@ import { fetchFile, uploadFile } from '../../files/utils';
 export const useAvatarFetch = (url: string) => {
   return useQuery({
     queryKey: ['account', url],
-    queryFn: fetchFile(url, ['name']),
+    queryFn: () => fetchFile(url, ['name']),
     enabled: !!url,
   });
 };
 
 export const useAvatarUpload = () => {
   const getPresignedUrl = trpc.account.uploadAvatarPresignedUrl.useMutation();
   return useMutation({
-    mutationFn: uploadFile(getPresignedUrl.mutateAsync),
+    mutationFn: (file?: File) => uploadFile(getPresignedUrl.mutateAsync, file),
   });
 };

src/files/utils.ts

@@ -2,71 +2,99 @@ import { UseMutateAsyncFunction } from '@tanstack/react-query';
 
 import { UploadSignedUrlInput } from './schemas';
 
-export const fetchFile = (url: string, metadata?: string[]) => async () => {
+/**
+ * Fetches a file from the specified URL and returns file information.
+ * Designed to be used as a `queryFn` in a `useQuery`.
+ *
+ * @param url The URL from which the file should be fetched.
+ * @param [metadata] The metadata of the file you want to retrieve.
+ * @returns A Promise that resolves to an object containing information about the file.
+ *
+ * @example
+ * // Usage with Tanstack Query's useQuery:
+ * const fileQuery = useQuery({
+    queryKey: ['fileKey', url],
+    queryFn: () => fetchFile(url, ['name']),
+    enabled: !!url,
+  });
+ */
+export const fetchFile = async (url: string, metadata?: string[]) => {
   const fileResponse = await fetch(url);
   if (!fileResponse.ok) {
     throw new Error('Could not fetch the file');
   }
 
   const lastModifiedDateHeader = fileResponse.headers.get('Last-Modified');
+  const defaultFileData = {
+    fileUrl: url,
+    size: fileResponse.headers.get('Content-Length') ?? undefined,
+    type: fileResponse.headers.get('Content-Type') ?? undefined,
+    lastModifiedDate: lastModifiedDateHeader
+      ? new Date(lastModifiedDateHeader)
+      : new Date(),
+  };
 
-  return (metadata || []).reduce(
-    (file, currentMetadata) => {
-      return {
-        ...file,
-        [currentMetadata]: fileResponse.headers.get(
-          `x-amz-meta-${currentMetadata}`
-        ),
-      };
-    },
-    {
-      fileUrl: url,
-      size: fileResponse.headers.get('Content-Length') ?? undefined,
-      type: fileResponse.headers.get('Content-Type') ?? undefined,
-      lastModifiedDate: lastModifiedDateHeader
-        ? new Date(lastModifiedDateHeader)
-        : new Date(),
-    }
-  );
+  if (!metadata) {
+    return defaultFileData;
+  }
+
+  return metadata.reduce((file, metadataKey) => {
+    return {
+      ...file,
+      [metadataKey]: fileResponse.headers.get(`x-amz-meta-${metadataKey}`),
+    };
+  }, defaultFileData);
 };
 
-export const uploadFile =
-  (
-    getPresignedUrl: UseMutateAsyncFunction<
-      { signedUrl: string; futureFileUrl: string },
-      unknown,
-      UploadSignedUrlInput | void
-    >
-  ) =>
-  async (
-    file?: File,
-    {
-      metadata,
-    }: {
-      metadata?: Record<string, string>;
-    } = {}
-  ) => {
-    if (!file) {
-      return {
-        fileUrl: undefined,
-      };
-    }
+/**
+ * Asynchronously uploads a file to a server using a presigned URL.
+ * Designed to be used as a `mutationFn` in a `useMutation`. 
+ *
+ * @param getPresignedUrl
+ *    - An asyncMutation that is used to obtain the presigned URL and the future URL where the file will be accessible.
+ *
+ * @param file - The file object to upload.
+ * @param metadata - Optional metadata for the file, which will be sent to the server when generating the presigned URL.
+ *
+ * @returns  A promise that resolves to an object containing the URL of the uploaded file,
+ *    or undefined if no file was provided.
+ *
+ * @example
+ * // Usage with Tanstack Query's useMutation:
+ * const getPresignedUrl = trpc.routeToGetPresignedUrl.useMutation();
+   const fileUpload =  useMutation({
+    mutationFn: (file?: File) => uploadFile(getPresignedUrl.mutateAsync, file),
+  });
+ */
+export const uploadFile = async (
+  getPresignedUrl: UseMutateAsyncFunction<
+    { signedUrl: string; futureFileUrl: string },
+    unknown,
+    UploadSignedUrlInput | void
+  >,
+  file?: File,
+  metadata: Record<string, string> = {}
+) => {
+  if (!file) {
+    return {
+      fileUrl: undefined,
+    };
+  }
 
-    console.log(file.name + ' uploaded');
-    const { signedUrl, futureFileUrl } = await getPresignedUrl({
-      metadata: {
-        name: file.name,
-        ...metadata,
-      },
-    });
+  const { signedUrl, futureFileUrl } = await getPresignedUrl({
+    metadata: {
+      name: file.name,
+      ...metadata,
+    },
+  });
 
-    await fetch(signedUrl, {
-      method: 'PUT',
-      headers: { 'Content-Type': file.type },
-      body: file,
-    });
+  await fetch(signedUrl, {
+    method: 'PUT',
+    headers: { 'Content-Type': file.type },
+    body: file,
+  });
 
-    return {
-      fileUrl: futureFileUrl,
-    } as const;
-  };
+  return {
+    fileUrl: futureFileUrl,
+  } as const;
+};

src/server/config/s3.ts

@@ -4,7 +4,7 @@ import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
 import { env } from '@/env.mjs';
 import { UploadSignedUrlOutput } from '@/files/schemas';
 
-const SIGNED_URL_EXPIRATION_TIME_MS = 3600;
+const SIGNED_URL_EXPIRATION_TIME_SECONDS = 3600; // 1 hour
 
 const S3 = new S3Client({
   region: 'auto',
@@ -36,7 +36,7 @@ export const getS3UploadSignedUrl = async (
       Key: options.key,
       Metadata: options.metadata,
     }),
-    { expiresIn: options.expiresIn ?? SIGNED_URL_EXPIRATION_TIME_MS }
+    { expiresIn: options.expiresIn ?? SIGNED_URL_EXPIRATION_TIME_SECONDS }
   );
 
   return {