Merge pull request #4759 from cloud-gov/feat-create-file-upload-hook-queue

feat: Create a file upload hook to queue uploads

Author: apburnes

api/services/file-storage/index.js

@@ -251,7 +251,7 @@ class SiteFileStorageSerivce {
 
     await this.#hasDuplicateKey(key, 'file');
 
-    await this.s3Client.putObject(fileBuffer, key);
+    await this.s3Client.putObject(fileBuffer, key, { ContentType: type });
 
     const fsf = await FileStorageFile.create({
       name,

frontend/hooks/useFileStorage.js

@@ -22,13 +22,10 @@ export default function useFileStorage(
   const previousData = useRef();
   const queryClient = useQueryClient();
 
-  const [uploadError, setUploadError] = useState(null);
-  const [uploadSuccess, setUploadSuccess] = useState(null);
   const [deleteError, setDeleteError] = useState(null);
   const [deleteSuccess, setDeleteSuccess] = useState(null);
   const [createFolderError, setCreateFolderError] = useState(null);
   const [createFolderSuccess, setCreateFolderSuccess] = useState(null);
-  const uploadTimeout = useRef(null);
   const deleteTimeout = useRef(null);
   const createFolderTimeout = useRef(null);
 
@@ -77,7 +74,6 @@ export default function useFileStorage(
 
   useEffect(() => {
     return () => {
-      if (uploadTimeout.current) clearTimeout(uploadTimeout.current);
       if (deleteTimeout.current) clearTimeout(deleteTimeout.current);
       if (createFolderTimeout.current) clearTimeout(createFolderTimeout.current);
     };
@@ -104,20 +100,15 @@ export default function useFileStorage(
   const uploadMutation = useMutation({
     mutationFn: ({ parent = '/', file }) =>
       federalist.uploadPublicFile(fileStorageId, parent, file),
-    onSuccess: () =>
-      handleSuccess(
-        setUploadSuccess,
-        setUploadError,
-        uploadTimeout,
-        'File uploaded successfully.',
-      ),
-    onError: (err, { file }) => {
-      const errorMessage = err?.message || 'Upload failed.';
-      const formattedMessage = errorMessage.includes('already exists')
-        ? `A file named "${file.name}" already exists in this folder.`
-        : errorMessage;
-      handleError(setUploadError, setUploadSuccess, uploadTimeout, formattedMessage);
+    onSuccess: (file) => {
+      queryClient.invalidateQueries({
+        queryKey: ['fileStorage', fileStorageId, path, sortKey, sortOrder, page],
+      });
+
+      return file;
     },
+    onError: (error) => error,
+    retry: false,
   });
 
   const createFolderMutation = useMutation({
@@ -157,8 +148,6 @@ export default function useFileStorage(
     deleteError,
     deleteSuccess,
     uploadFile: (parent, file) => uploadMutation.mutateAsync({ parent, file }),
-    uploadError,
-    uploadSuccess,
     createFolder: (parent, name) => createFolderMutation.mutateAsync({ parent, name }),
     createFolderError,
     createFolderSuccess,

frontend/hooks/useFileStorage.test.jsx

@@ -1,19 +1,18 @@
 import { waitFor, renderHook, act } from '@testing-library/react';
 import nock from 'nock';
-import { spy } from 'sinon';
+import sinon from 'sinon';
 import { createTestQueryClient } from '@support/queryClient';
 import {
   getFileStorageFiles,
   getFileStorageFilesError,
   deletePublicItem,
   deletePublicItemError,
-  uploadPublicFile,
-  uploadPublicFileError,
   createPublicDirectory,
   createPublicDirectoryError,
 } from '@support/nocks/fileStorage';
 import useFileStorage from './useFileStorage';
 import { getFileStorageData } from '../../test/frontend/support/data/fileStorageData';
+import federalist from '@util/federalistApi';
 
 const createWrapper = createTestQueryClient();
 
@@ -26,6 +25,7 @@ const props = {
 };
 describe('useFileStorage', () => {
   beforeEach(() => nock.cleanAll());
+  afterEach(() => sinon.restore());
   afterAll(() => nock.restore());
 
   it('should fetch public files successfully', async () => {
@@ -119,7 +119,7 @@ describe('useFileStorage', () => {
       wrapper: createWrapper(),
     });
 
-    const qcSpy = spy(result.current.queryClient, 'invalidateQueries');
+    const qcSpy = sinon.spy(result.current.queryClient, 'invalidateQueries');
     await act(async () => {
       await result.current.deleteItem(fileItem);
     });
@@ -141,7 +141,7 @@ describe('useFileStorage', () => {
       wrapper: createWrapper(),
     });
 
-    const qcSpy = spy(result.current.queryClient, 'invalidateQueries');
+    const qcSpy = sinon.spy(result.current.queryClient, 'invalidateQueries');
 
     await act(async () => {
       await result.current.deleteItem(fileItem).catch(() => {});
@@ -155,100 +155,42 @@ describe('useFileStorage', () => {
   it('should upload a file successfully and invalidate the query', async () => {
     const parent = '/';
     const mockFile = new File(['file content'], 'test-file.txt', { type: 'text/plain' });
+    const stub = sinon.stub(federalist, 'uploadPublicFile');
 
-    await uploadPublicFile(props.fileStorageId, parent, mockFile);
     await getFileStorageFiles({ ...props, path: parent }, { times: 3 });
 
+    stub.resolves();
+
     const { result } = renderHook(() => useFileStorage(props.fileStorageId), {
       wrapper: createWrapper(),
     });
 
-    const qcSpy = spy(result.current.queryClient, 'invalidateQueries');
-
-    await act(async () => {
-      await result.current.uploadFile(parent, mockFile);
-    });
-
-    await waitFor(() =>
-      expect(result.current.uploadSuccess).toContain('File uploaded successfully'),
-    );
-    expect(qcSpy.calledOnce).toBe(true);
-  });
-
-  it('should successfully upload a file even inside a nested folder', async () => {
-    const parent = '/nested/folder';
-    const mockFile = new File(['file content'], 'nested-file.txt', {
-      type: 'text/plain',
-    });
-
-    await uploadPublicFile(props.fileStorageId, parent, mockFile);
-    await getFileStorageFiles({ ...props, path: parent }, { times: 3 });
-
-    const { result } = renderHook(
-      () =>
-        // don't spread from Object.values() if you're going to overwrite something
-        useFileStorage(
-          props.fileStorageId,
-          parent,
-          props.sortKey,
-          props.sortOrder,
-          props.page,
-        ),
-      {
-        wrapper: createWrapper(),
-      },
-    );
-
-    const qcSpy = spy(result.current.queryClient, 'invalidateQueries');
+    const qcSpy = sinon.spy(result.current.queryClient, 'invalidateQueries');
 
-    await act(async () => {
-      await result.current.uploadFile(parent, mockFile);
-    });
+    await waitFor(async () => result.current.uploadFile(parent, mockFile));
 
-    await waitFor(() =>
-      expect(result.current.uploadSuccess).toContain('File uploaded successfully'),
-    );
     expect(qcSpy.calledOnce).toBe(true);
   });
 
-  it('should return an error message when file upload fails', async () => {
+  it('should throw error when upload file fails', async () => {
     const parent = '/';
     const mockFile = new File(['file content'], 'test-file.txt', { type: 'text/plain' });
+    const stub = sinon.stub(federalist, 'uploadPublicFile');
+    stub.rejects();
 
-    const errorMessage = 'Upload failed.';
-    await uploadPublicFileError(props.fileStorageId, parent, mockFile, errorMessage);
     await getFileStorageFiles({ ...props, path: parent }, { times: 3 });
 
     const { result } = renderHook(() => useFileStorage(props.fileStorageId), {
       wrapper: createWrapper(),
     });
 
-    await act(async () => {
-      await result.current.uploadFile(parent, mockFile).catch(() => {});
-    });
-
-    await waitFor(() => expect(result.current.uploadError).toBe(errorMessage));
-  });
+    const qcSpy = sinon.spy(result.current.queryClient, 'invalidateQueries');
 
-  it('should return a specific error when uploading a duplicate file', async () => {
-    const parent = '/';
-    const mockFile = new File(['file content'], 'existing-file.txt', {
-      type: 'text/plain',
-    });
-    const errorMessage = `A file named "${mockFile.name}" already exists in this folder.`;
-
-    await uploadPublicFileError(props.fileStorageId, parent, mockFile, errorMessage);
-    await getFileStorageFiles({ ...props, path: parent }, { times: 3 });
-
-    const { result } = renderHook(() => useFileStorage(props.fileStorageId), {
-      wrapper: createWrapper(),
-    });
-
-    await act(async () => {
-      await result.current.uploadFile(parent, mockFile).catch(() => {});
-    });
+    await waitFor(async () =>
+      result.current.uploadFile(parent, mockFile).catch((e) => e),
+    );
 
-    await waitFor(() => expect(result.current.uploadError).toBe(errorMessage));
+    expect(qcSpy.calledOnce).toBe(false);
   });
 
   it('should create a folder successfully and invalidate the query', async () => {
@@ -262,7 +204,7 @@ describe('useFileStorage', () => {
       wrapper: createWrapper(),
     });
 
-    const qcSpy = spy(result.current.queryClient, 'invalidateQueries');
+    const qcSpy = sinon.spy(result.current.queryClient, 'invalidateQueries');
 
     await act(async () => {
       await result.current.createFolder(parent, folderName);

frontend/hooks/useMultiFileUpload.js

@@ -0,0 +1,110 @@
+import { useState, useCallback } from 'react';
+
+// interface FileUploadItem {
+//   data: File;
+//   id: string;
+//   status: | 'queued' | 'uploading' | 'success' | 'error';
+//   message?: string
+// }
+
+// interface UseMultiFileUploadOptions {
+//   maxFileSizeMB?: number;
+//   onUpload: (file: File) => Promise<any>;
+// }
+
+const MEGABYTE_LIMIT = 100;
+const mbToBytes = (mb) => mb * 1024 * 1024;
+
+export const useMultiFileUpload = ({ onUpload, maxFileSizeMB = MEGABYTE_LIMIT }) => {
+  const [isUploading, setIsUploading] = useState('pending');
+  const [files, setFiles] = useState([]);
+
+  // eslint-disable-next-line sonarjs/pseudo-random
+  const generateFileId = () => Math.random().toString(36).substring(2, 15);
+
+  const addFiles = useCallback((newFiles) => {
+    const fileItems = Array.from(newFiles).map((data) => {
+      const byteLimit = mbToBytes(maxFileSizeMB);
+
+      if (data.size > byteLimit) {
+        return {
+          data,
+          id: generateFileId(),
+          status: 'error',
+          message: `Exceeds the ${maxFileSizeMB}MB limit.`,
+        };
+      }
+
+      return {
+        data,
+        id: generateFileId(),
+        status: 'queued',
+        message: null,
+      };
+    });
+
+    setFiles((prevFiles) => [...prevFiles, ...fileItems]);
+  }, []);
+
+  const clearFiles = useCallback(() => setFiles(() => []));
+
+  const uploadFile = useCallback(
+    async (fileItem) => {
+      try {
+        // Update the uploading status of the files
+        setFiles((prevFiles) =>
+          prevFiles.map((f) =>
+            f.id === fileItem.id ? { ...f, status: 'uploading' } : f,
+          ),
+        );
+
+        // Perform the upload
+        await onUpload(fileItem.data);
+
+        // Update state on success
+        // Remove successful upload
+        setFiles((prevFiles) =>
+          prevFiles.map((f) =>
+            f.id === fileItem.id ? { ...f, status: 'success', message: 'Success.' } : f,
+          ),
+        );
+      } catch (error) {
+        // Update state on error
+        const message = error?.message || `Unable to upload ${fileItem.data.name}`;
+
+        setFiles((prevFiles) =>
+          prevFiles.map((f) =>
+            f.id === fileItem.id ? { ...f, status: 'error', message } : f,
+          ),
+        );
+      }
+    },
+    [onUpload],
+  );
+
+  const startUploads = useCallback(async () => {
+    setIsUploading(() => 'uploading');
+    const pendingFiles = files.filter((f) => f.status === 'queued');
+
+    if (pendingFiles.length === 0) {
+      return setIsUploading(() => 'complete');
+    }
+
+    await Promise.allSettled(pendingFiles.map((fileItem) => uploadFile(fileItem)));
+
+    setIsUploading(() => 'complete');
+  }, [files]);
+
+  const removeFile = useCallback((fileId) => {
+    setFiles((prevFiles) => prevFiles.filter((f) => f.id !== fileId));
+  }, []);
+
+  return {
+    files,
+    addFiles,
+    clearFiles,
+    isUploading,
+    removeFile,
+    startUploads,
+  };
+};