feat(storagemanager): add useAccelerateEndpoint (#5501)

Author: dbanksdesign

.changeset/healthy-baboons-film.md

@@ -0,0 +1,13 @@
+---
+"@aws-amplify/ui-react-storage": minor
+---
+
+feat(storagemanager): add useAccelerateEndpoint
+
+```jsx
+<StorageManager
+  acceptedFileTypes={['image/*']}
+  path="public/"
+  useAccelerateEndpoint
+/>
+```

docs/src/pages/[platform]/connected-components/storage/storagemanager/props.ts

@@ -95,6 +95,11 @@ export const STORAGE_MANAGER = [
     description: 'Text to override in the component.',
     type: 'StorageManagerDisplayText',
   },
+  {
+    name: `useAccelerateEndpoint?`,
+    description: 'Use the accelerated S3 endpoint to upload files.',
+    type: 'boolean',
+  },
   {
     name: `components?.Container?`,
     description: 'The container the StorageManager is wrapped in.',

docs/src/pages/[platform]/connected-components/storage/storagemanager/react.mdx

@@ -229,6 +229,44 @@ You can add metadata by adding a `metadata` object in the return object of `proc
   </ExampleCode>
 </Example>
 
+## Accelerate Endpoint
+
+Amazon S3 transfer acceleration optimizes transfer speeds from around the world into S3 buckets. When you use Transfer Acceleration, additional data transfer charges might apply. For more information about pricing, see [Amazon S3 pricing](https://aws.amazon.com/s3/pricing/).
+
+To use transfer acceleration you first need to [enable it on your S3 bucket](https://docs.amplify.aws/react/build-a-backend/storage/extend-s3-resources/#example---enable-transfer-acceleration). Then add `useAccelerateEndpoint` on the `<StorageManager />` component. By default transfer acceleration is off. 
+
+<ExampleCode>
+
+```jsx
+<StorageManager
+  acceptedFileTypes={['image/*']}
+  maxFileCount={10}
+  useAccelerateEndpoint
+/>
+```
+
+</ExampleCode>
+
+You can also choose whether or not to use transfer acceleration at the file level by returning `useAccelerateEndpoint` from the `processFile` function.
+
+<ExampleCode>
+
+```jsx
+<StorageManager
+  acceptedFileTypes={['image/*']}
+  maxFileCount={10}
+  processFile={({ file, key }) => {
+    return {
+      file,
+      key,
+      useAccelerateEndpoint: file.size > 10000 ? true : false,
+    };
+  }}
+/>
+```
+
+</ExampleCode>
+
 ## Customization
 
 ### Text and labels

examples/next/pages/ui/components/storage/storage-manager/use-accelerate-endpoint/amplify_outputs.js

@@ -0,0 +1,2 @@
+import amplifyOutputs from '@environments/storage/gen2/amplify_outputs';
+export default amplifyOutputs;

examples/next/pages/ui/components/storage/storage-manager/use-accelerate-endpoint/index.page.tsx

@@ -0,0 +1,28 @@
+import { Amplify } from 'aws-amplify';
+import { StorageManager } from '@aws-amplify/ui-react-storage';
+import '@aws-amplify/ui-react/styles.css';
+import amplifyOutputs from './amplify_outputs';
+Amplify.configure(amplifyOutputs);
+
+const processFile = ({ file, key }) => {
+  return {
+    file,
+    key,
+    useAccelerateEndpoint: file.size > 10000 ? true : false,
+  };
+};
+
+export function StorageManagerExample() {
+  return (
+    <StorageManager
+      acceptedFileTypes={['image/*']}
+      path="public/"
+      maxFileCount={10}
+      showThumbnails
+      autoUpload={false}
+      useAccelerateEndpoint
+      processFile={processFile}
+    />
+  );
+}
+export default StorageManagerExample;

packages/e2e/features/ui/components/storage/storage-manager/upload-file-to-S3-accelerate-endpoint.feature

@@ -0,0 +1,35 @@
+Feature: Storage Manager with accelerate endpoint
+
+  Background:
+    Given I'm running the example "ui/components/storage/storage-manager/use-accelerate-endpoint"
+
+  @react
+  Scenario: I select a file and upload it on click
+    Then I see "Browse files"
+    Then I select a file with file name "test.jpg"
+    Then I see "test.jpg"
+    Then I see "Upload 1 file"
+    Then I see "Clear all"
+    Given I intercept '{ "method": "POST", "url": "**/test.jpg?uploads"  }' with fixture "Storage.public-uploads.xml"
+    Given I intercept '{ "method": "PUT", "url": "**/test.jpg?partNumber=1**"  }' with fixture "Storage.public-upload-part.xml" and add header "Etag" with value ""abc123""
+    Given I intercept '{ "method": "POST", "url": "**/test.jpg?uploadId**"  }' with fixture "Storage.public-upload-complete-multipart.xml"
+    Given I intercept '{ "method": "GET", "url": "**/?list-type=2**"  }' with fixture "Storage.public-uploads-list.xml"
+    Then I see "1 file selected"
+    Then I click the "Upload 1 file" button
+    Then I see "Uploaded"
+    Then I see "1 file uploaded"
+
+  @react
+  Scenario: I can clear all selected files
+    Then I see "Browse files"
+    Then I select a file with file name "test.jpg"
+    Then I see "test.jpg"
+    Then I see "Upload 1 file"
+    Then I see "Clear all"
+    Given I intercept '{ "method": "POST", "url": "**/test.jpg?uploads"  }' with fixture "Storage.public-uploads.xml"
+    Given I intercept '{ "method": "PUT", "url": "**/test.jpg?partNumber=1**"  }' with fixture "Storage.public-upload-part.xml" and add header "Etag" with value ""abc123""
+    Given I intercept '{ "method": "POST", "url": "**/test.jpg?uploadId**"  }' with fixture "Storage.public-upload-complete-multipart.xml"
+    Given I intercept '{ "method": "GET", "url": "**/?list-type=2**"  }' with fixture "Storage.public-uploads-list.xml"
+    Then I click the "Clear all" button
+    Then I see "Browse files"
+    Then I don't see "Uploaded"

packages/react-storage/src/components/StorageManager/StorageManager.tsx

@@ -58,6 +58,7 @@ const StorageManagerBase = React.forwardRef(function StorageManager(
     path,
     processFile,
     showThumbnails = true,
+    useAccelerateEndpoint,
   }: StorageManagerPathProps | StorageManagerProps,
   ref: React.ForwardedRef<StorageManagerHandle>
 ): JSX.Element {
@@ -154,6 +155,7 @@ const StorageManagerBase = React.forwardRef(function StorageManager(
     setUploadSuccess,
     processFile,
     path,
+    useAccelerateEndpoint,
   });
 
   const onFilePickerChange = (event: React.ChangeEvent<HTMLInputElement>) => {

packages/react-storage/src/components/StorageManager/hooks/useUploadFiles/useUploadFiles.ts

@@ -18,6 +18,7 @@ export interface UseUploadFilesProps
       | 'onUploadStart'
       | 'maxFileCount'
       | 'processFile'
+      | 'useAccelerateEndpoint'
     >,
     Pick<
       UseStorageManager,
@@ -42,6 +43,7 @@ export function useUploadFiles({
   setUploadingFile,
   setUploadProgress,
   setUploadSuccess,
+  useAccelerateEndpoint,
 }: UseUploadFilesProps): void {
   React.useEffect(() => {
     const filesReadyToUpload = files.filter(
@@ -77,6 +79,7 @@ export function useUploadFiles({
           onProgress,
           path,
           processFile,
+          useAccelerateEndpoint,
         });
 
         uploadFile({
@@ -119,5 +122,6 @@ export function useUploadFiles({
     setUploadSuccess,
     processFile,
     path,
+    useAccelerateEndpoint,
   ]);
 }

packages/react-storage/src/components/StorageManager/types.ts

@@ -41,6 +41,7 @@ export type DefaultFile = Pick<StorageFile, 'key'>;
 export interface ProcessFileParams extends Record<string, any> {
   file: File;
   key: string;
+  useAccelerateEndpoint?: boolean;
 }
 
 export type ProcessFile = (
@@ -126,6 +127,8 @@ export interface StorageManagerProps {
    * Provided value is prefixed to the file `key` for each file
    */
   path?: string;
+
+  useAccelerateEndpoint?: boolean;
 }
 
 export interface StorageManagerPathProps
@@ -138,4 +141,5 @@ export interface StorageManagerPathProps
    */
   path: string | PathCallback;
   accessLevel?: never;
+  useAccelerateEndpoint?: boolean;
 }

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

@@ -62,7 +62,11 @@ describe('getInput', () => {
   it('resolves an UploadDataWithPathInput with a string `path` as expected', async () => {
     const expected: UploadDataWithPathInput = {
       data: file,
-      options: { contentType: file.type, onProgress },
+      options: {
+        contentType: file.type,
+        useAccelerateEndpoint: undefined,
+        onProgress,
+      },
       path: `${stringPath}${key}`,
     };
 
@@ -76,7 +80,11 @@ describe('getInput', () => {
   it('resolves an UploadDataWithPathInput with a callback `path` as expected', async () => {
     const expected: UploadDataWithPathInput = {
       data: file,
-      options: { contentType: file.type, onProgress },
+      options: {
+        contentType: file.type,
+        useAccelerateEndpoint: undefined,
+        onProgress,
+      },
       path: `${stringPath}${identityId}${key}`,
     };
 
@@ -90,7 +98,12 @@ describe('getInput', () => {
   it('resolves an UploadDataInput without a `path` as expected', async () => {
     const expected: UploadDataInput = {
       data: file,
-      options: { accessLevel, contentType: file.type, onProgress },
+      options: {
+        accessLevel,
+        contentType: file.type,
+        useAccelerateEndpoint: undefined,
+        onProgress,
+      },
       key,
     };
 
@@ -104,7 +117,12 @@ describe('getInput', () => {
   it('resolves an UploadDataInput with a `path` as expected', async () => {
     const expected: UploadDataInput = {
       data: file,
-      options: { accessLevel, contentType: file.type, onProgress },
+      options: {
+        accessLevel,
+        contentType: file.type,
+        useAccelerateEndpoint: undefined,
+        onProgress,
+      },
       key: `${stringPath}${key}`,
     };
 
@@ -118,7 +136,11 @@ describe('getInput', () => {
   it('handles a `processFile` param expected', async () => {
     const expected: UploadDataWithPathInput = {
       data: file,
-      options: { contentType: file.type, onProgress },
+      options: {
+        contentType: file.type,
+        useAccelerateEndpoint: undefined,
+        onProgress,
+      },
       path: `${stringPath}${identityId}${processFilePrefix}${key}`,
     };
 
@@ -167,6 +189,7 @@ describe('getInput', () => {
         contentType: file.type,
         metadata,
         onProgress,
+        useAccelerateEndpoint: undefined,
       },
       path: `${stringPath}${processFilePrefix}${key}`,
     };
@@ -216,19 +239,46 @@ describe('getInput', () => {
       processedKey,
     });
   });
-});
 
-it('defaults `options.contentType` to "binary/octet-stream" when no file type is provided', async () => {
-  const data = new File(['hello'], 'hello.png');
-  const expected: UploadDataWithPathInput = {
-    data,
-    options: { contentType: 'binary/octet-stream', onProgress },
-    path: `${stringPath}${key}`,
-  };
+  it('defaults `options.contentType` to "binary/octet-stream" when no file type is provided', async () => {
+    const data = new File(['hello'], 'hello.png');
+    const expected: UploadDataWithPathInput = {
+      data,
+      options: {
+        contentType: 'binary/octet-stream',
+        useAccelerateEndpoint: undefined,
+        onProgress,
+      },
+      path: `${stringPath}${key}`,
+    };
+
+    const input = getInput({ ...pathStringInput, file: data });
 
-  const input = getInput({ ...pathStringInput, file: data });
+    const output = await input();
 
-  const output = await input();
+    expect(output).toStrictEqual(expected);
+  });
 
-  expect(output).toStrictEqual(expected);
+  it('accepts useAccelerateEndpoint', async () => {
+    const data = new File(['hello'], 'hello.png');
+    const expected: UploadDataWithPathInput = {
+      data,
+      options: {
+        contentType: 'binary/octet-stream',
+        useAccelerateEndpoint: true,
+        onProgress,
+      },
+      path: `${stringPath}${key}`,
+    };
+
+    const input = getInput({
+      ...pathStringInput,
+      file: data,
+      useAccelerateEndpoint: true,
+    });
+
+    const output = await input();
+
+    expect(output).toStrictEqual(expected);
+  });
 });