Amplify Gen 2 uses default S3 bucket instead of selected one

Question

I am building an app in react native using amplify. I have 2 S3 buckets, one for images and the other for thumbnails which i have set up through amplify configure.

Amplify.configure({
  Auth: {
//auth settings
  },
  Storage: {
    S3: {
      region: "ap-southeast-2",
      bucket: "app-thumbnails",

buckets: {
        'thumbnails': {
          bucketName: 'app-thumbnails',
          region: 'ap-southeast-2'
        },
        'images': {
          bucketName: 'app-images',
          region: 'ap-southeast-2'
        }
      }
    }
  },
});

When trying to access files from the images bucket using options it switches to the default bucket. I have tried switching the default bucket in the config and experience the same result when trying to access thumbnails.

import { list } from 'aws-amplify/storage';

useEffect(() => {
        const getImages = async () => {
          try {
            const result = await list({
                path: '',
                options: {
                    bucket: 'images'
                }
            });
            setThumbnails(result);
            console.log(result);
          } catch (error) {
            console.log( error);
          }
        };
    
        getImages();
      }, []);

I followed the Gen 2 documentation for react native and still run into this error. Any help would be greatly appreciated.

Alejandro Puig · Answer

Alternatively, provide bucket name from console and associated region:

```
import { list } from 'aws-amplify/storage';

useEffect(() => {
    const getImages = async () => {
      try {
        const result = await list({
            path: '',
            options: {
                bucket: {
                              bucketName: 'app-images',
                              region: 'ap-southeast-2'
                        }
            }
        });
        setThumbnails(result);
        console.log(result);
      } catch (error) {
        console.log( error);
      }
    };

getImages();
  }, []);
```

For reference: [https://docs.amplify.aws/react-native/build-a-backend/storage/list-files/#list-files-from-a-specified-bucket]()

Alejandro Puig · Answer

Hi Nem:

Please try to create named backend objects :

**amplify/storage/resource.ts**
```
export const appThumbnails = defineStorage({
  name: 'appThumbnails',
  isDefault: true, // identify your default storage bucket (required)
});

export const appImages = defineStorage({
  name: 'appImages',
  access: (allow) => ({
    'private/{entity_id}/*': [
      allow.entity('identity').to(['read', 'write', 'delete'])
    ]
  })
})
```
**amplify/backend.ts**

```
import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';
import { appThumbnails, appImages } from './storage/resource';

defineBackend({
  auth,
  appThumbnails,
  appImages,
});
```
**in your app code**

```
import { list } from 'aws-amplify/storage';

useEffect(() => {
    const getImages = async () => {
      try {
        const result = await list({
            path: '',
            options: {
                bucket: 'appImages'
            }
        });
        setThumbnails(result);
        console.log(result);
      } catch (error) {
        console.log( error);
      }
    };

getImages();
  }, []);
```

changed some names from [https://docs.amplify.aws/react-native/build-a-backend/storage/set-up-storage/#configure-additional-storage-buckets]()

Amplify Gen 2 uses default S3 bucket instead of selected one

Add your answer

Relevant content