feature(multi-bucket): add multi-bucket support to storage components

.changeset/loud-walls-do.md

@@ -0,0 +1,5 @@
+---
+'@aws-amplify/ui-react-storage': minor
+---
+
+Support for multiple buckets added to storage image and file uploader

docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/BucketExact.tsx

@@ -0,0 +1,15 @@
+import { FileUploader } from '@aws-amplify/ui-react-storage';
+
+export const App = () => {
+  return (
+    <FileUploader
+      acceptedFileTypes={['image/*']}
+      bucket={{
+        bucketName: 'my-bucket-xxxxxxxx',
+        region: 'us-west-2',
+      }}
+      path="public/"
+      maxFileCount={1}
+    />
+  );
+};

docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/BucketFriendly.tsx

@@ -0,0 +1,12 @@
+import { FileUploader } from '@aws-amplify/ui-react-storage';
+
+export const App = () => {
+  return (
+    <FileUploader
+      acceptedFileTypes={['image/*']}
+      bucket="my-bucket"
+      path="public/"
+      maxFileCount={1}
+    />
+  );
+};

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

@@ -49,6 +49,12 @@ export const FILE_UPLOADER = [
       'Determines if the upload will automatically start after a file is selected. The default value is `true`',
     type: 'boolean',
   },
+  {
+    name: 'bucket?',
+    description:
+      'The S3 bucket which be will accessed. Allows either a string containing the user-assigned "friendly name" or an object containing a combination of the backend-assigned name on S3 and the S3 region.',
+    type: 'string | { bucketName: string, region: string }',
+  },
   {
     name: `maxFileCount`,
     description: '',

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

@@ -168,6 +168,26 @@ You can limit what users upload with these 3 props:
   </ExampleCode>
 </Example>
 
+## Setting a Bucket
+
+If you have [configured your Amplify project to use multiple S3 buckets](https://docs.amplify.aws/react/build-a-backend/storage/set-up-storage/#configure-additional-storage-buckets), you can use the `bucket` prop to choose which of the buckets the component will use:
+
+<Example>
+  <FileTypesExample />
+  <ExampleCode>
+    ```jsx file=./examples/BucketFriendly.tsx
+    ```
+  </ExampleCode>
+</Example>
+
+Alternatively, you can specify the bucket using the name and region it is assigned within S3:
+
+<Example>
+  <ExampleCode>
+    ```jsx file=./examples/BucketExact.tsx
+    ```
+  </ExampleCode>
+</Example>
 
 ## Pausable / Resumable Uploads
 

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

@@ -10,6 +10,12 @@ export const STORAGE_IMAGE = [
       'The path to the image in Storage, representing a full S3 object key. See https://docs.amplify.aws/react/build-a-backend/storage/download-files/',
     type: 'string | ((input: { identityId?: string }) => string);',
   },
+  {
+    name: 'bucket?',
+    description:
+      'The S3 bucket which be will accessed. Allows either a string containing the user-assigned "friendly name" or an object containing a combination of the backend-assigned name on S3 and the S3 region.',
+    type: 'string | { bucketName: string, region: string }',
+  },
   {
     name: 'imgKey',
     description:

examples/next/pages/ui/components/storage/storage-image/multi-bucket/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-image/multi-bucket/index.page.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+import { Amplify } from 'aws-amplify';
+import { Text, Loader } from '@aws-amplify/ui-react';
+import { StorageImage } from '@aws-amplify/ui-react-storage';
+import '@aws-amplify/ui-react/styles.css';
+import amplifyOutputs from './amplify_outputs';
+
+Amplify.configure(amplifyOutputs);
+
+export function StorageImageExample() {
+  const [isFirstImgLoaded, setIsFirstImgLoaded] = React.useState(false);
+  const [isSecondImgLoaded, setIsSecondImgLoaded] = React.useState(false);
+
+  return (
+    <>
+      <StorageImage
+        alt="public cat 1"
+        bucket="StorageEndToEnd"
+        path="public/public-e2e.jpeg"
+        onLoad={() => setIsFirstImgLoaded(true)}
+      />
+      {isFirstImgLoaded ? (
+        <Text>The first public image is loaded.</Text>
+      ) : (
+        <Loader testId="Loader1" />
+      )}
+      <StorageImage
+        alt="public cat 2"
+        bucket="StorageEndToEndSecondary"
+        path={() => 'public/public-e2e.jpeg'}
+        onLoad={() => setIsSecondImgLoaded(true)}
+      />
+      {isSecondImgLoaded ? (
+        <Text>The second public image is loaded.</Text>
+      ) : (
+        <Loader testId="Loader2" />
+      )}
+    </>
+  );
+}
+export default StorageImageExample;

packages/e2e/features/ui/components/storage/storage-image/load-public-images-from-two-s3-buckets.feature

@@ -0,0 +1,13 @@
+Feature: Load two images, each from a different S3 bucket with public access level settings
+
+  Background:
+    Given I'm running the example "ui/components/storage/storage-image/multi-bucket"
+
+  @react
+  Scenario: I successfully load two images from two buckets
+    Then I see "Loader1" element
+    Then I see "Loader2" element
+    Then I see the "public cat 1" image
+    Then I see the "public cat 2" image
+    Then I see "The first public image is loaded."
+    Then I see "The second public image is loaded."

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

@@ -45,6 +45,7 @@ const FileUploaderBase = React.forwardRef(function FileUploader(
     acceptedFileTypes = [],
     accessLevel,
     autoUpload = true,
+    bucket,
     components,
     defaultFiles,
     displayText: overrideDisplayText,
@@ -142,6 +143,7 @@ const FileUploaderBase = React.forwardRef(function FileUploader(
 
   useUploadFiles({
     accessLevel,
+    bucket,
     files,
     isResumable,
     maxFileCount,

packages/react-storage/src/components/FileUploader/__tests__/FileUploader.test.tsx

@@ -246,6 +246,40 @@ describe('FileUploader', () => {
     });
   });
 
+  it('passes a supplied bucket name to the options object', async () => {
+    const onUploadSuccess = jest.fn();
+    render(
+      <FileUploader
+        bucket="my-bucket"
+        path="my-path"
+        maxFileCount={100}
+        onUploadSuccess={onUploadSuccess}
+      />
+    );
+    const hiddenInput = document.querySelector(
+      'input[type="file"]'
+    ) as HTMLInputElement;
+
+    expect(hiddenInput).toBeInTheDocument();
+    const file = new File(['file content'], 'file.txt', { type: 'text/plain' });
+    fireEvent.change(hiddenInput, {
+      target: { files: [file] },
+    });
+
+    // Wait for the file to be uploaded
+    await waitFor(() => {
+      expect(uploadDataSpy).toHaveBeenCalledWith({
+        data: file,
+        options: {
+          bucket: 'my-bucket',
+          contentType: 'text/plain',
+          onProgress: expect.any(Function),
+        },
+        path: 'my-pathfile.txt',
+      });
+    });
+  });
+
   it('calls onUploadStart callback when file starts uploading', async () => {
     const onUploadStart = jest.fn();
     render(

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

@@ -5,6 +5,7 @@ import { isFunction } from '@aws-amplify/ui';
 
 import { PathCallback, uploadFile } from '../../utils';
 import { getInput } from '../../utils';
+import { StorageBucket } from '../../types';
 import { FileStatus } from '../../types';
 import { FileUploaderProps } from '../../types';
 import { UseFileUploader } from '../useFileUploader';
@@ -25,11 +26,13 @@ export interface UseUploadFilesProps
       'setUploadingFile' | 'setUploadProgress' | 'setUploadSuccess' | 'files'
     > {
   accessLevel?: FileUploaderProps['accessLevel'];
+  bucket?: StorageBucket;
   path?: string | PathCallback;
 }
 
 export function useUploadFiles({
   accessLevel,
+  bucket,
   files,
   isResumable,
   maxFileCount,
@@ -68,6 +71,7 @@ export function useUploadFiles({
       if (file) {
         const input = getInput({
           accessLevel,
+          bucket,
           file,
           key,
           onProgress,
@@ -105,6 +109,7 @@ export function useUploadFiles({
   }, [
     files,
     accessLevel,
+    bucket,
     isResumable,
     setUploadProgress,
     setUploadingFile,

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

@@ -10,6 +10,15 @@ import {
 } from './ui';
 import { FileUploaderDisplayText, PathCallback, UploadTask } from './utils';
 
+export interface BucketInfo {
+  bucketName: string;
+  region: string;
+}
+
+// accepts either a 'friendly name' that the user has assigned
+// or an object containing the region as well as the name generated by the backend
+export type StorageBucket = string | BucketInfo;
+
 export enum FileStatus {
   ADDED = 'added',
   QUEUED = 'queued',
@@ -71,6 +80,7 @@ export interface FileUploaderProps {
   /**
    * Component overrides
    */
+  bucket?: never;
   components?: {
     Container?: React.ComponentType<ContainerProps>;
     DropZone?: React.ComponentType<DropZoneProps>;
@@ -132,7 +142,7 @@ export interface FileUploaderProps {
 }
 
 export interface FileUploaderPathProps
-  extends Omit<FileUploaderProps, 'accessLevel' | 'path'> {
+  extends Omit<FileUploaderProps, 'accessLevel' | 'bucket' | 'path'> {
   /**
    * S3 bucket key, allows either a `string` or a `PathCallback`:
    * - `string`: `path` is prefixed to the file `key` for each file
@@ -141,5 +151,6 @@ export interface FileUploaderPathProps
    */
   path: string | PathCallback;
   accessLevel?: never;
+  bucket?: StorageBucket;
   useAccelerateEndpoint?: boolean;
 }

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

@@ -60,6 +60,7 @@ describe('getInput', () => {
     const expected: UploadDataWithPathInput = {
       data: file,
       options: {
+        bucket: undefined,
         contentType: file.type,
         useAccelerateEndpoint: undefined,
         onProgress,
@@ -78,6 +79,7 @@ describe('getInput', () => {
     const expected: UploadDataWithPathInput = {
       data: file,
       options: {
+        bucket: undefined,
         contentType: file.type,
         useAccelerateEndpoint: undefined,
         onProgress,
@@ -97,6 +99,7 @@ describe('getInput', () => {
       data: file,
       options: {
         accessLevel,
+        bucket: undefined,
         contentType: file.type,
         useAccelerateEndpoint: undefined,
         onProgress,
@@ -116,6 +119,7 @@ describe('getInput', () => {
       data: file,
       options: {
         accessLevel,
+        bucket: undefined,
         contentType: file.type,
         useAccelerateEndpoint: undefined,
         onProgress,
@@ -134,6 +138,7 @@ describe('getInput', () => {
     const expected: UploadDataWithPathInput = {
       data: file,
       options: {
+        bucket: undefined,
         contentType: file.type,
         useAccelerateEndpoint: undefined,
         onProgress,
@@ -218,6 +223,7 @@ describe('getInput', () => {
     const expected: UploadDataWithPathInput = {
       data,
       options: {
+        bucket: undefined,
         contentType: 'binary/octet-stream',
         useAccelerateEndpoint: undefined,
         onProgress,
@@ -237,6 +243,7 @@ describe('getInput', () => {
     const expected: UploadDataWithPathInput = {
       data,
       options: {
+        bucket: undefined,
         contentType: 'binary/octet-stream',
         useAccelerateEndpoint: true,
         onProgress,

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

@@ -3,12 +3,13 @@ import { UploadDataWithPathInput, UploadDataInput } from 'aws-amplify/storage';
 
 import { isString, isFunction } from '@aws-amplify/ui';
 
-import { ProcessFile, StorageAccessLevel } from '../types';
+import { ProcessFile, StorageAccessLevel, StorageBucket } from '../types';
 import { resolveFile } from './resolveFile';
 import { PathCallback, PathInput } from './uploadFile';
 
 export interface GetInputParams {
   accessLevel: StorageAccessLevel | undefined;
+  bucket?: StorageBucket;
   file: File;
   key: string;
   onProgress: NonNullable<UploadDataWithPathInput['options']>['onProgress'];
@@ -19,6 +20,7 @@ export interface GetInputParams {
 
 export const getInput = ({
   accessLevel,
+  bucket,
   file,
   key,
   onProgress,
@@ -41,7 +43,13 @@ export const getInput = ({
     const contentType = file.type || 'binary/octet-stream';
 
     // IMPORTANT: always pass `...rest` here for backwards compatibility
-    const options = { contentType, onProgress, useAccelerateEndpoint, ...rest };
+    const options = {
+      bucket,
+      contentType,
+      onProgress,
+      useAccelerateEndpoint,
+      ...rest,
+    };
 
     let inputResult: PathInput | UploadDataInput;
     if (hasKeyInput) {