fix(storage-browser): multi-region S3 buckets (#6734)

* feat(storage-browser): add multi-region S3 bucket support

- Add getBucketRegion helper to extract bucket-specific regions from Amplify config
- Update constructBucket to use bucket-specific regions instead of global region
- Fix CORS errors when accessing buckets in different AWS regions
- Add comprehensive unit tests for getBucketRegion function
- Add integration tests for multi-region bucket navigation
- Export getBucketRegion from utils for reusability
- Add try-catch error handling for robust region extraction

Fixes #6722

* add change set

Author: osama-rizk

.changeset/twenty-clocks-flash.md

@@ -0,0 +1,5 @@
+---
+'@aws-amplify/ui-react-storage': minor
+---
+
+fix(storage-browser): multi-region S3 buckets

examples/next/pages/ui/components/storage/storage-browser/multi-region/aws-exports.js

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

examples/next/pages/ui/components/storage/storage-browser/multi-region/index.page.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Amplify } from 'aws-amplify';
+import { signOut } from 'aws-amplify/auth';
+
+import { Button, Flex, withAuthenticator } from '@aws-amplify/ui-react';
+import { StorageBrowser } from '@aws-amplify/ui-react-storage';
+import config from './aws-exports';
+
+import '@aws-amplify/ui-react-storage/styles.css';
+import { parseAmplifyConfig } from 'aws-amplify/utils';
+
+const amplifyConfig = parseAmplifyConfig(config);
+
+const bucketInAnotherRegionOne = {
+  name: 'MultiRegionOneForStorageBrowser',
+  bucketName: 'multi-region-1-for-storage-browser',
+  region: 'eu-central-1',
+  paths: {
+    'multi-region-folder-do-not-delete/*': {
+      guest: ['get', 'list', 'write'],
+      authenticated: ['get', 'list', 'write', 'delete'],
+    },
+  },
+};
+
+const bucketInAnotherRegionTwo = {
+  name: 'MultiRegionTwoForStorageBrowser',
+  bucketName: 'multi-region-2-for-storage-browser',
+  region: 'ap-northeast-3',
+  paths: {
+    'another-multi-region-folder-do-not-delete/*': {
+      guest: ['get', 'list', 'write'],
+      authenticated: ['get', 'list', 'write', 'delete'],
+    },
+  },
+};
+
+Amplify.configure({
+  ...amplifyConfig,
+  Storage: {
+    ...amplifyConfig.Storage,
+    S3: {
+      ...amplifyConfig.Storage.S3,
+      buckets: {
+        ...amplifyConfig.Storage.S3?.buckets,
+        [bucketInAnotherRegionTwo.name]: bucketInAnotherRegionTwo,
+        [bucketInAnotherRegionOne.name]: bucketInAnotherRegionOne,
+      },
+    },
+  },
+});
+
+function MultiRegionReproduction() {
+  return (
+    <Flex direction="column" width="100vw" height="100vh" padding="xl">
+      <Button
+        marginBlockEnd="xl"
+        alignSelf="flex-start"
+        size="small"
+        onClick={() => signOut()}
+      >
+        Sign Out
+      </Button>
+
+      <StorageBrowser
+        displayText={{
+          LocationsView: {
+            title: 'This StorageBrowser uses Multi-Region buckets',
+          },
+        }}
+      />
+    </Flex>
+  );
+}
+
+export default withAuthenticator(MultiRegionReproduction);

packages/e2e/features/ui/components/storage/storage-browser/multi-region-buckets.feature

@@ -0,0 +1,25 @@
+Feature: Storage Browser Multi-Region Bucket Support
+
+  Background:
+    Given I'm running the example "ui/components/storage/storage-browser/multi-region"
+    And I type my "email" with status "CONFIRMED"
+    And I type my password
+    And I click the "Sign in" button
+
+  @react
+  Scenario: Navigate to bucket in different region
+    Then I see "This StorageBrowser uses Multi-Region buckets"
+    When I click the "another-multi-region-folder-do-not-delete/" button
+    When I click the button with label "multi-region-file-do-not-delete.jpg file"
+    Then I see "File Preview"
+    Then I see "File Information"
+    Then I see the "Image preview for multi-region-file-do-not-delete.jpg" image
+
+   @react
+  Scenario: Navigate to bucket in a third different region
+    Then I see "This StorageBrowser uses Multi-Region buckets"
+    When I click the "multi-region-folder-do-not-delete/" button  
+    When I click the button with label "multi-region-file-do-not-delete.jpg file"
+    Then I see "File Preview"
+    Then I see "File Information"
+    Then I see the "Image preview for multi-region-file-do-not-delete.jpg" image

packages/react-storage/src/components/StorageBrowser/actions/handlers/__tests__/utils.spec.ts

@@ -2,8 +2,17 @@ import { LocationAccess as AccessGrantLocation } from '../../../storage-internal
 
 import { MULTIPART_UPLOAD_THRESHOLD_BYTES } from '../constants';
 import { LocationData } from '../types';
+
+const mockGetConfig = jest.fn();
+jest.mock('aws-amplify', () => ({
+  Amplify: {
+    getConfig: mockGetConfig,
+  },
+}));
+
 import {
   createFileDataItem,
+  getBucketRegion,
   getFileKey,
   getFilteredLocations,
   isFileDataItem,
@@ -236,4 +245,66 @@ describe('utils', () => {
       expect(output).toBe(false);
     });
   });
+
+  describe('getBucketRegion', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('returns bucket-specific region when found', () => {
+      mockGetConfig.mockReturnValue({
+        Storage: {
+          S3: {
+            buckets: {
+              TestBucket: {
+                bucketName: 'test-bucket',
+                region: 'us-west-2',
+              },
+            },
+          },
+        },
+      });
+
+      const result = getBucketRegion('test-bucket', 'us-east-1');
+      expect(result).toBe('us-west-2');
+    });
+
+    it('returns fallback region when bucket not found', () => {
+      mockGetConfig.mockReturnValue({
+        Storage: {
+          S3: {
+            buckets: {
+              OtherBucket: {
+                bucketName: 'other-bucket',
+                region: 'us-west-2',
+              },
+            },
+          },
+        },
+      });
+
+      const result = getBucketRegion('test-bucket', 'us-east-1');
+      expect(result).toBe('us-east-1');
+    });
+
+    it('returns fallback region when no buckets config', () => {
+      mockGetConfig.mockReturnValue({
+        Storage: {
+          S3: {},
+        },
+      });
+
+      const result = getBucketRegion('test-bucket', 'us-east-1');
+      expect(result).toBe('us-east-1');
+    });
+
+    it('returns fallback region when getConfig throws error', () => {
+      mockGetConfig.mockImplementation(() => {
+        throw new Error('Config error');
+      });
+
+      const result = getBucketRegion('test-bucket', 'us-east-1');
+      expect(result).toBe('us-east-1');
+    });
+  });
 });

packages/react-storage/src/components/StorageBrowser/actions/handlers/listLocationItems.ts

@@ -1,3 +1,4 @@
+import { getBucketRegion } from './utils';
 import type {
   StorageSubpathStrategy,
   ListPaginateInput,
@@ -98,7 +99,7 @@ export const listLocationItemsHandler: ListLocationItemsHandler = async (
     bucket: _bucket,
     credentials,
     customEndpoint,
-    region,
+    region: globalRegion,
     accountId,
   } = config;
 
@@ -110,7 +111,8 @@ export const listLocationItemsHandler: ListLocationItemsHandler = async (
     ..._options
   } = options ?? {};
 
-  const bucket = { bucketName: _bucket, region };
+  const bucketRegion = getBucketRegion(_bucket, globalRegion);
+  const bucket = { bucketName: _bucket, region: bucketRegion };
   const subpathStrategy: StorageSubpathStrategy = {
     delimiter,
     strategy: delimiter ? 'exclude' : 'include',

packages/react-storage/src/components/StorageBrowser/actions/handlers/utils.ts

@@ -13,13 +13,41 @@ import type {
   LocationType,
 } from './types';
 
+import { Amplify } from 'aws-amplify';
+
+export const getBucketRegion = (
+  bucketName: string,
+  fallbackRegion: string
+): string => {
+  try {
+    const config = Amplify.getConfig()?.Storage?.S3;
+
+    if (!config?.buckets || typeof config.buckets !== 'object') {
+      return fallbackRegion;
+    }
+
+    for (const bucketConfig of Object.values(config.buckets)) {
+      if (bucketConfig.bucketName === bucketName && bucketConfig.region) {
+        return bucketConfig.region;
+      }
+    }
+
+    return fallbackRegion;
+  } catch (error) {
+    return fallbackRegion;
+  }
+};
+
 export const constructBucket = ({
   bucket: bucketName,
-  region,
+  region: globalRegion,
 }: Pick<ActionInputConfig, 'bucket' | 'region'>): {
   bucketName: string;
   region: string;
-} => ({ bucketName, region });
+} => {
+  const bucketRegion = getBucketRegion(bucketName, globalRegion);
+  return { bucketName, region: bucketRegion };
+};
 
 export const parseAccessGrantLocation = (
   location: AccessGrantLocation