fix (Storage/FileUploader): FileUploader does not upload processed file contents in certain scenarios (#6050)

* fix: FileUploader should upload processed file regardless of key/path

Author: choyky

.changeset/mighty-ladybugs-chew.md

@@ -0,0 +1,5 @@
+---
+'@aws-amplify/ui-react-storage': patch
+---
+
+fix (Storage/FileUploader): FileUploader does not upload processed file contents in certain scenarios

examples/next/pages/ui/components/storage/file-uploader/process-file-access-level/index.page.tsx

@@ -9,15 +9,24 @@ Amplify.configure(awsExports);
 const processFile: FileUploaderProps['processFile'] = async ({ file }) => {
   const fileExtension = file.name.split('.').pop();
 
-  return file
+  // pretend the input `file` has been compressed:
+  const blob = new Blob(['Compressed data'], { type: 'text/plain' });
+  const compressedFile = new File([blob], undefined, {
+    type: 'text/plain',
+  });
+
+  return compressedFile
     .arrayBuffer()
     .then((filebuffer) => window.crypto.subtle.digest('SHA-1', filebuffer))
     .then((hashBuffer) => {
       const hashArray = Array.from(new Uint8Array(hashBuffer));
       const hashHex = hashArray
         .map((a) => a.toString(16).padStart(2, '0'))
         .join('');
-      return { file, key: `${hashHex}.${fileExtension}` };
+      return {
+        file: compressedFile,
+        key: `${hashHex}.${fileExtension}`,
+      };
     });
 };
 

examples/next/pages/ui/components/storage/storage-manager/process-file-access-level/index.page.tsx

@@ -12,15 +12,24 @@ Amplify.configure(awsExports);
 const processFile: StorageManagerProps['processFile'] = async ({ file }) => {
   const fileExtension = file.name.split('.').pop();
 
-  return file
+  // pretend the input `file` has been compressed:
+  const blob = new Blob(['Compressed data'], { type: 'text/plain' });
+  const compressedFile = new File([blob], undefined, {
+    type: 'text/plain',
+  });
+
+  return compressedFile
     .arrayBuffer()
     .then((filebuffer) => window.crypto.subtle.digest('SHA-1', filebuffer))
     .then((hashBuffer) => {
       const hashArray = Array.from(new Uint8Array(hashBuffer));
       const hashHex = hashArray
         .map((a) => a.toString(16).padStart(2, '0'))
         .join('');
-      return { file, key: `${hashHex}.${fileExtension}` };
+      return {
+        file: compressedFile,
+        key: `${hashHex}.${fileExtension}`,
+      };
     });
 };
 

packages/react-storage/src/components/FileUploader/utils/__tests__/getInput.spec.ts

@@ -148,39 +148,69 @@ describe('getInput', () => {
     expect(output).toStrictEqual(expected);
   });
 
-  it('includes additional values returned from `processFile` in `options`', async () => {
+  it('correctly parses values returned from `processFile`', async () => {
     const contentDisposition = 'attachment';
     const metadata = { key };
+    const processedFile = new File([''], `myfile.txt`);
 
-    const expected: UploadDataWithPathInput = {
-      data: file,
+    const input = getInput({
+      ...pathStringInput,
+      processFile: ({ key, ...rest }) => ({
+        ...rest,
+        key: `${processFilePrefix}${key}`,
+        file: processedFile,
+        metadata,
+        contentDisposition,
+      }),
+    });
+
+    const output = await input();
+
+    expect(output).toMatchObject({
+      data: expect.any(File),
       options: {
         contentDisposition,
         contentType: file.type,
         metadata,
-        onProgress,
+        onProgress: expect.any(Function),
         useAccelerateEndpoint: undefined,
       },
       path: `${stringPath}${processFilePrefix}${key}`,
-    };
+    });
+    expect(output.data).toBe(processedFile);
+  });
+
+  it('correctly parses values returned from `processFile` when in accessLevel mode', async () => {
+    const contentDisposition = 'attachment';
+    const metadata = { key };
+    const processedFile = new File([], `myfile.txt`);
 
     const input = getInput({
-      ...pathStringInput,
+      ...accessLevelWithoutPathInput,
       processFile: ({ key, ...rest }) => ({
+        ...rest,
         key: `${processFilePrefix}${key}`,
         metadata,
         contentDisposition,
-        ...rest,
+        file: processedFile,
       }),
     });
 
     const output = await input();
 
-    expect(output).toStrictEqual(expected);
-    expect(output.options?.metadata).toStrictEqual(metadata);
-    expect(output.options?.contentDisposition).toStrictEqual(
-      contentDisposition
-    );
+    expect(output).toMatchObject({
+      data: expect.any(File),
+      options: {
+        accessLevel,
+        contentDisposition,
+        contentType: file.type,
+        metadata,
+        onProgress: expect.any(Function),
+        useAccelerateEndpoint: undefined,
+      },
+    });
+
+    expect(output.data).toBe(processedFile);
   });
 
   it('defaults `options.contentType` to "binary/octet-stream" when no file type is provided', async () => {

packages/react-storage/src/components/FileUploader/utils/getInput.ts

@@ -61,7 +61,7 @@ export const getInput = ({
         hasCallbackPath ? path({ identityId }) : path
       }${processedKey}`;
 
-      inputResult = { data: file, path: resolvedPath, options };
+      inputResult = { data, path: resolvedPath, options };
     }
 
     return inputResult;