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

@@ -37,6 +37,7 @@ const uploadDataSpy = jest
 
 const fileUploaderProps: FileUploaderProps = {
   accessLevel: 'guest',
+  bucket: 'my-bucket',
   maxFileCount: 100,
 };
 
@@ -238,6 +239,7 @@ describe('FileUploader', () => {
         data: file,
         options: {
           accessLevel: 'guest',
+          bucket: 'my-bucket',
           contentType: 'text/plain',
           onProgress: expect.any(Function),
         },
@@ -268,6 +270,7 @@ describe('FileUploader', () => {
         data: file,
         options: {
           accessLevel: 'guest',
+          bucket: 'my-bucket',
           contentType: 'text/plain',
           onProgress: expect.any(Function),
         },

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

@@ -12,6 +12,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',
@@ -68,6 +77,10 @@ export interface FileUploaderProps {
    * Determines if the upload will automatically start after a file is selected, default value: true
    */
   autoUpload?: boolean;
+  /**
+   * Designates the bucket to upload to, if the user has multiple buckets configured
+   */
+  bucket?: StorageBucket;
   /**
    * Component overrides
    */
@@ -141,5 +154,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,
@@ -155,6 +160,7 @@ describe('getInput', () => {
     const expected: UploadDataWithPathInput = {
       data: file,
       options: {
+        bucket: undefined,
         contentDisposition,
         contentType: file.type,
         metadata,
@@ -188,6 +194,7 @@ describe('getInput', () => {
     const expected: UploadDataWithPathInput = {
       data,
       options: {
+        bucket: undefined,
         contentType: 'binary/octet-stream',
         useAccelerateEndpoint: undefined,
         onProgress,
@@ -207,6 +214,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

@@ -4,12 +4,13 @@ import { UploadDataWithPathInput, UploadDataInput } from 'aws-amplify/storage';
 
 import { isString, isTypedFunction } from '@aws-amplify/ui';
 
-import { ProcessFile } from '../types';
+import { ProcessFile, 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'];
@@ -20,6 +21,7 @@ export interface GetInputParams {
 
 export const getInput = ({
   accessLevel,
+  bucket,
   file,
   key,
   onProgress,
@@ -42,7 +44,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) {

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

@@ -44,6 +44,7 @@ const getDeprecationMessage = ({
 
 export const StorageImage = ({
   accessLevel,
+  bucket,
   className,
   fallbackSrc,
   identityId,
@@ -82,11 +83,20 @@ export const StorageImage = ({
       onError,
       options: {
         accessLevel,
+        bucket,
         targetIdentityId: identityId,
         validateObjectExistence,
       },
     }),
-    [accessLevel, imgKey, identityId, onError, path, validateObjectExistence]
+    [
+      accessLevel,
+      bucket,
+      imgKey,
+      identityId,
+      onError,
+      path,
+      validateObjectExistence,
+    ]
   );
 
   const { url } = useGetUrl(input);