Can't Storage.put acl: 'public-read', erro

gzimbron commented 2 years ago

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have read the guide for submitting bug reports.
[X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Not applicable

Amplify APIs

Storage

Amplify Categories

storage

Environment information

``` System: OS: macOS 12.0.1 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 1.21 GB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node npm: 8.1.1 - ~/.nvm/versions/node/v14.18.1/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Browsers: Chrome: 96.0.4664.93 Safari: 15.1 npmPackages: @sveltejs/adapter-auto: next => 1.0.0-next.3 @sveltejs/kit: next => 1.0.0-next.201 aws-amplify: ^4.3.10 => 4.3.10 aws-sdk: ^2.1044.0 => 2.1044.0 svelte: ^3.44.0 => 3.44.2 sveltestrap: ^5.6.3 => 5.6.3 npmGlobalPackages: @aws-amplify/cli: 7.6.2 aws-cli: 0.0.2 firebase-tools: 9.23.0 npm: 8.1.1 ```

Describe the bug

I receive error 403 every time I want to put file (image) with acl 'public-read'

If I Storage.put("IMAGE.jpg", file); I can access to url only with token and i want to access direectly: https://MY-BUCKET.s3.amazonaws.com/public/IMAGE.jpg

Bucket permissions:

Expected behavior

I want to put a file accesible for everyone with url like: https://MY-BUCKET.s3.amazonaws.com/public/IMAGE.jpg

Reproduction steps

1.- Add storage to my app 2.- import Storage from aws-amplify 3.- doing Storage.put()

Code Snippet

  import Storage from '@aws-amplify/storage';

  const onFileSelected = async (event) => {
    let file = event.target.files[0];

    try {
      const { key } = await Storage.put(file.name, file, {
        acl: 'public-read',
      });

      console.log(key);
    } catch (error) {
      console.log('Error uploading file:', error);
    } finally {
      event.target.value = null;
    }
  };

Log output

``` ConsoleLogger.ts:115 [DEBUG] 18:38.450 Credentials - getting credentials ConsoleLogger.ts:115 [DEBUG] 18:38.450 Credentials - picking up credentials ConsoleLogger.ts:115 [DEBUG] 18:38.451 Credentials - getting new cred promise ConsoleLogger.ts:115 [DEBUG] 18:38.451 Credentials - checking if credentials exists and not expired ConsoleLogger.ts:115 [DEBUG] 18:38.451 Credentials - need to get a new credential or refresh the existing one ConsoleLogger.ts:115 [DEBUG] 18:38.452 Credentials - no credentials for expiration check ConsoleLogger.ts:115 [DEBUG] 18:38.452 AuthClass - Getting current user credentials ConsoleLogger.ts:115 [DEBUG] 18:38.453 AuthClass - Getting current session ConsoleLogger.ts:125 [DEBUG] 18:38.454 AuthClass - Getting the session from this user: CognitoUser2 {username: '32b7ae9a-a1a4-4203-9da5-d586fc15f65b', pool: CognitoUserPool2, Session: null, client: Client2, signInUserSession: CognitoUserSession2, …} ConsoleLogger.ts:125 [DEBUG] 18:38.454 AuthClass - Succeed to get the user session CognitoUserSession2 {idToken: CognitoIdToken2, refreshToken: CognitoRefreshToken2, accessToken: CognitoAccessToken2, clockDrift: 0} ConsoleLogger.ts:125 [DEBUG] 18:38.454 AuthClass - getting session success CognitoUserSession2 {idToken: CognitoIdToken2, refreshToken: CognitoRefreshToken2, accessToken: CognitoAccessToken2, clockDrift: 0} ConsoleLogger.ts:115 [DEBUG] 18:38.455 Credentials - set credentials from session ConsoleLogger.ts:125 [DEBUG] 18:39.209 Credentials - Load credentials successfully {accessKeyId: 'ttttttt', secretAccessKey: '+dfgMLvq1', sessionToken: 'IQoCG', expiration: Wed Dec 08 2021 15:18:39 GMT-0600 (hora estándar central), identityId: 'us-east-1:0e091sdfsd1638'} ConsoleLogger.ts:115 [DEBUG] 18:39.213 Credentials - getting credentials ConsoleLogger.ts:115 [DEBUG] 18:39.213 Credentials - picking up credentials ConsoleLogger.ts:115 [DEBUG] 18:39.213 Credentials - getting new cred promise ConsoleLogger.ts:115 [DEBUG] 18:39.214 Credentials - checking if credentials exists and not expired ConsoleLogger.ts:125 [DEBUG] 18:39.214 Credentials - are these credentials expired? {accessKeyId: 'gfd', secretAccessKey: '+sdf', sessionToken: 'sdf', expiration: Wed Dec 08 2021 15:18:39 GMT-0600 (hora estándar central), identityId: 'us-easdfsdfsf5e1638', …} ConsoleLogger.ts:115 [DEBUG] 18:39.214 Credentials - credentials not changed and not expired, directly return ConsoleLogger.ts:125 [DEBUG] 18:39.214 S3ClientUtils - credentials provider get credentials {accessKeyId: 'fdg', sessionToken: 'IQdfgVhc3QtMSJIMEdfG', secretAccessKey: '+fdfgdfg/f', identityId: 'ugdf', authenticated: true} ConsoleLogger.ts:118 [DEBUG] 18:39.753 axios-http-handler ProgressEvent {isTrusted: true, lengthComputable: true, loaded: 163840, total: 330745, type: 'progress', …} ConsoleLogger.ts:118 [DEBUG] 18:39.955 axios-http-handler ProgressEvent {isTrusted: true, lengthComputable: true, loaded: 180224, total: 330745, type: 'progress', …} ConsoleLogger.ts:118 [DEBUG] 18:40.157 axios-http-handler ProgressEvent {isTrusted: true, lengthComputable: true, loaded: 196608, total: 330745, type: 'progress', …} ConsoleLogger.ts:118 [DEBUG] 18:40.258 axios-http-handler ProgressEvent {isTrusted: true, lengthComputable: true, loaded: 212992, total: 330745, type: 'progress', …} ConsoleLogger.ts:118 [DEBUG] 18:40.359 axios-http-handler ProgressEvent {isTrusted: true, lengthComputable: true, loaded: 229376, total: 330745, type: 'progress', …} ConsoleLogger.ts:118 [DEBUG] 18:40.561 axios-http-handler ProgressEvent {isTrusted: true, lengthComputable: true, loaded: 245760, total: 330745, type: 'progress', …} ConsoleLogger.ts:118 [DEBUG] 18:40.662 axios-http-handler ProgressEvent {isTrusted: true, lengthComputable: true, loaded: 278528, total: 330745, type: 'progress', …} ConsoleLogger.ts:118 [DEBUG] 18:40.763 axios-http-handler ProgressEvent {isTrusted: true, lengthComputable: true, loaded: 294912, total: 330745, type: 'progress', …} ConsoleLogger.ts:118 [DEBUG] 18:40.863 axios-http-handler ProgressEvent {isTrusted: true, lengthComputable: true, loaded: 311296, total: 330745, type: 'progress', …} ConsoleLogger.ts:118 [DEBUG] 18:40.963 axios-http-handler ProgressEvent {isTrusted: true, lengthComputable: true, loaded: 330745, total: 330745, type: 'progress', …} xhr.js:187 PUT https://teststoragedevbuck42016-staging.s3.us-east-1.amazonaws.com/public/dr.jpeg?x-id=PutObject 403 (Forbidden) dispatchXhrRequest @ xhr.js:187 xhrAdapter @ xhr.js:13 dispatchRequest @ dispatchRequest.js:53 request @ Axios.js:108 wrap @ bind.js:9 AxiosHttpHandler2.handle @ axios-http-handler.ts:170 (anonymous) @ PutObjectCommand.ts:144 (anonymous) @ deserializerMiddleware.ts:19 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ deserializerMiddleware.ts:17 (anonymous) @ S3ClientUtils.ts:97 step @ StorageUtils.ts:50 (anonymous) @ StorageUtils.ts:50 (anonymous) @ StorageUtils.ts:50 __awaiter3 @ StorageUtils.ts:50 (anonymous) @ S3ClientUtils.ts:95 (anonymous) @ middleware.ts:26 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 fulfilled @ tslib.es6.js:71 Promise.then (async) step @ tslib.es6.js:73 fulfilled @ tslib.es6.js:71 Promise.then (async) step @ tslib.es6.js:73 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ middleware.ts:23 (anonymous) @ defaultStrategy.ts:125 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 step @ tslib.es6.js:85 (anonymous) @ tslib.es6.js:81 fulfilled @ tslib.es6.js:71 Promise.then (async) step @ tslib.es6.js:73 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 StandardRetryStrategy2.retry @ defaultStrategy.ts:107 (anonymous) @ retryMiddleware.ts:22 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ retryMiddleware.ts:18 (anonymous) @ user-agent-middleware.ts:50 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 fulfilled @ tslib.es6.js:71 Promise.then (async) step @ tslib.es6.js:73 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ user-agent-middleware.ts:32 (anonymous) @ index.ts:32 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ index.ts:19 (anonymous) @ bucketEndpointMiddleware.ts:85 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 fulfilled @ tslib.es6.js:71 Promise.then (async) step @ tslib.es6.js:73 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ bucketEndpointMiddleware.ts:23 (anonymous) @ index.ts:27 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ index.ts:18 (anonymous) @ use-regional-endpoint.ts:33 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 fulfilled @ tslib.es6.js:71 Promise.then (async) step @ tslib.es6.js:73 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ use-regional-endpoint.ts:25 (anonymous) @ serializerMiddleware.ts:21 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 fulfilled @ tslib.es6.js:71 Promise.then (async) step @ tslib.es6.js:73 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ serializerMiddleware.ts:18 (anonymous) @ index.ts:51 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ index.ts:18 (anonymous) @ S3ClientUtils.ts:80 step @ StorageUtils.ts:50 (anonymous) @ StorageUtils.ts:50 fulfilled @ StorageUtils.ts:50 Promise.then (async) step @ StorageUtils.ts:50 (anonymous) @ StorageUtils.ts:50 __awaiter3 @ StorageUtils.ts:50 (anonymous) @ S3ClientUtils.ts:68 (anonymous) @ validate-bucket-name.ts:29 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ validate-bucket-name.ts:19 (anonymous) @ loggerMiddleware.ts:21 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ loggerMiddleware.ts:17 Client2.send @ client.ts:60 (anonymous) @ AWSS3ProviderManagedUpload.ts:83 step @ AWSS3ProviderManagedUpload.ts:32 (anonymous) @ AWSS3ProviderManagedUpload.ts:32 fulfilled @ AWSS3ProviderManagedUpload.ts:32 Promise.then (async) step @ AWSS3ProviderManagedUpload.ts:32 (anonymous) @ AWSS3ProviderManagedUpload.ts:32 __awaiter4 @ AWSS3ProviderManagedUpload.ts:32 AWSS3ProviderManagedUpload2.upload @ AWSS3ProviderManagedUpload.ts:76 AWSS3Provider2.put @ AWSS3Provider.ts:607 Storage3.put @ Storage.ts:343 onFileSelected @ archivos.svelte? [sm]:15 change_handler @ archivos.svelte? [sm]:61 ConsoleLogger.ts:118 [DEBUG] 18:41.493 axios-http-handler ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 243, total: 0, type: 'progress', …} ConsoleLogger.ts:115 [ERROR] 18:41.494 axios-http-handler - Request failed with status code 403 ConsoleLogger2._log @ ConsoleLogger.ts:115 ConsoleLogger2.error @ ConsoleLogger.ts:174 (anonymous) @ axios-http-handler.ts:186 Promise.catch (async) AxiosHttpHandler2.handle @ axios-http-handler.ts:180 (anonymous) @ PutObjectCommand.ts:144 (anonymous) @ deserializerMiddleware.ts:19 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ deserializerMiddleware.ts:17 (anonymous) @ S3ClientUtils.ts:97 step @ StorageUtils.ts:50 (anonymous) @ StorageUtils.ts:50 (anonymous) @ StorageUtils.ts:50 __awaiter3 @ StorageUtils.ts:50 (anonymous) @ S3ClientUtils.ts:95 (anonymous) @ middleware.ts:26 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 fulfilled @ tslib.es6.js:71 Promise.then (async) step @ tslib.es6.js:73 fulfilled @ tslib.es6.js:71 Promise.then (async) step @ tslib.es6.js:73 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ middleware.ts:23 (anonymous) @ defaultStrategy.ts:125 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 step @ tslib.es6.js:85 (anonymous) @ tslib.es6.js:81 fulfilled @ tslib.es6.js:71 Promise.then (async) step @ tslib.es6.js:73 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 StandardRetryStrategy2.retry @ defaultStrategy.ts:107 (anonymous) @ retryMiddleware.ts:22 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ retryMiddleware.ts:18 (anonymous) @ user-agent-middleware.ts:50 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 fulfilled @ tslib.es6.js:71 Promise.then (async) step @ tslib.es6.js:73 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ user-agent-middleware.ts:32 (anonymous) @ index.ts:32 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ index.ts:19 (anonymous) @ bucketEndpointMiddleware.ts:85 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 fulfilled @ tslib.es6.js:71 Promise.then (async) step @ tslib.es6.js:73 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ bucketEndpointMiddleware.ts:23 (anonymous) @ index.ts:27 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ index.ts:18 (anonymous) @ use-regional-endpoint.ts:33 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 fulfilled @ tslib.es6.js:71 Promise.then (async) step @ tslib.es6.js:73 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ use-regional-endpoint.ts:25 (anonymous) @ serializerMiddleware.ts:21 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 fulfilled @ tslib.es6.js:71 Promise.then (async) step @ tslib.es6.js:73 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ serializerMiddleware.ts:18 (anonymous) @ index.ts:51 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ index.ts:18 (anonymous) @ S3ClientUtils.ts:80 step @ StorageUtils.ts:50 (anonymous) @ StorageUtils.ts:50 fulfilled @ StorageUtils.ts:50 Promise.then (async) step @ StorageUtils.ts:50 (anonymous) @ StorageUtils.ts:50 __awaiter3 @ StorageUtils.ts:50 (anonymous) @ S3ClientUtils.ts:68 (anonymous) @ validate-bucket-name.ts:29 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ validate-bucket-name.ts:19 (anonymous) @ loggerMiddleware.ts:21 step @ tslib.es6.js:100 (anonymous) @ tslib.es6.js:81 (anonymous) @ tslib.es6.js:74 __awaiter3 @ tslib.es6.js:70 (anonymous) @ loggerMiddleware.ts:17 Client2.send @ client.ts:60 (anonymous) @ AWSS3ProviderManagedUpload.ts:83 step @ AWSS3ProviderManagedUpload.ts:32 (anonymous) @ AWSS3ProviderManagedUpload.ts:32 fulfilled @ AWSS3ProviderManagedUpload.ts:32 Promise.then (async) step @ AWSS3ProviderManagedUpload.ts:32 (anonymous) @ AWSS3ProviderManagedUpload.ts:32 __awaiter4 @ AWSS3ProviderManagedUpload.ts:32 AWSS3ProviderManagedUpload2.upload @ AWSS3ProviderManagedUpload.ts:76 AWSS3Provider2.put @ AWSS3Provider.ts:607 Storage3.put @ Storage.ts:343 onFileSelected @ archivos.svelte? [sm]:15 change_handler @ archivos.svelte? [sm]:61 archivos.svelte? [sm]:21 Error uploading file: AccessDenied: Access Denied at http://localhost:3000/node_modules/.vite/chunk-ZNKQBNY7.js?v=4d714e09:14747:51 at step (http://localhost:3000/node_modules/.vite/chunk-ZNKQBNY7.js?v=4d714e09:2101:19) at Object.next (http://localhost:3000/node_modules/.vite/chunk-ZNKQBNY7.js?v=4d714e09:2048:14) at fulfilled (http://localhost:3000/node_modules/.vite/chunk-ZNKQBNY7.js?v=4d714e09:2019:24) ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

jamesaucode commented 2 years ago

I can repro the issue, seems like the problem is the IAM roles created from the CLI team does not grant the PutObjectAcl permission.

jamesaucode commented 2 years ago

There were a couple workarounds from that issue, do they work for you? https://github.com/aws-amplify/amplify-js/issues/960#issuecomment-421843145 https://github.com/aws-amplify/amplify-js/issues/960#issuecomment-441303860

chrisbonifacio commented 2 years ago

Hi 👋 Closing this as we have not heard back from you. If you are still experiencing this issue and in need of assistance, please feel free to comment and provide us with any information previously requested by our team members so we can re-open this issue and be better able to assist you.

Thank you!

github-actions[bot] commented 1 year ago

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server amplify-help forum.

aws-amplify / amplify-js