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

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);

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

@@ -1,6 +1,15 @@
 import { StorageAccessLevel } from '@aws-amplify/core';
 import { ImageProps } from '@aws-amplify/ui-react';
 
+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
+type StorageBucket = string | BucketInfo;
+
 export interface StorageImageProps extends Omit<ImageProps, 'src'> {
   // Use imgKey instead of key because key is a reserved keyword
   // and cannot be accessed via props in React components
@@ -15,6 +24,7 @@ export interface StorageImageProps extends Omit<ImageProps, 'src'> {
    * `accessLevel` will be replaced with `path` in a future major version of Amplify UI. See https://ui.docs.amplify.aws/react/connected-components/storage/storageimage#props
    */
   accessLevel: StorageAccessLevel;
+  bucket?: StorageBucket;
   /**
    * @deprecated
    * `identityId` will be replaced with `path` in a future major version of Amplify UI. See https://ui.docs.amplify.aws/react/connected-components/storage/storageimage#props
@@ -36,6 +46,7 @@ export interface StorageImageProps extends Omit<ImageProps, 'src'> {
 
 type OmittedPropKey =
   | 'accessLevel'
+  | 'bucket'
   | 'imgKey'
   | 'identityId'
   | 'onStorageGetError'
@@ -46,6 +57,7 @@ export interface StorageImagePathProps
   path: string | ((input: { identityId?: string }) => string);
   imgKey?: never;
   accessLevel?: never;
+  bucket?: StorageBucket;
   identityId?: never;
   onStorageGetError?: never;
 }

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

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

packages/react-storage/src/components/StorageManager/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 { StorageManagerProps } from '../../types';
 import { UseStorageManager } from '../useStorageManager';
@@ -25,12 +26,14 @@ export interface UseUploadFilesProps
       'setUploadingFile' | 'setUploadProgress' | 'setUploadSuccess' | 'files'
     > {
   accessLevel?: StorageManagerProps['accessLevel'];
+  bucket?: StorageBucket;
   onProcessFileSuccess: (input: { id: string; processedKey: string }) => void;
   path?: string | PathCallback;
 }
 
 export function useUploadFiles({
   accessLevel,
+  bucket,
   files,
   isResumable,
   maxFileCount,
@@ -73,6 +76,7 @@ export function useUploadFiles({
 
         const input = getInput({
           accessLevel,
+          bucket,
           file,
           key,
           onProcessFileSuccess: handleProcessFileSuccess,
@@ -111,6 +115,7 @@ export function useUploadFiles({
   }, [
     files,
     accessLevel,
+    bucket,
     isResumable,
     setUploadProgress,
     setUploadingFile,

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

@@ -12,6 +12,15 @@ import {
 } from './ui';
 import { StorageManagerDisplayText, PathCallback, UploadTask } from './utils';
 
+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 StorageManagerProps {
    * 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
    */
@@ -139,6 +152,7 @@ export interface StorageManagerPathProps
    * - `PathCallback`: callback provided an input containing the current `identityId`,
    *    resolved value is prefixed to the file `key` for each file
    */
+  bucket?: StorageBucket;
   path: string | PathCallback;
   accessLevel?: never;
   useAccelerateEndpoint?: boolean;

packages/react-storage/src/components/StorageManager/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;
   onProcessFileSuccess: (input: { processedKey: string }) => void;
@@ -21,6 +22,7 @@ export interface GetInputParams {
 
 export const getInput = ({
   accessLevel,
+  bucket,
   file,
   key,
   onProcessFileSuccess,
@@ -44,7 +46,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) {