AWS storage upload issue

[BalajiSriraman]

Before opening, please confirm:

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

JavaScript Framework

React

Amplify APIs

Storage

Amplify Version

v6

Amplify Categories

storage

Backend

None

Environment information

# Put output below this line
 OS: Linux 6.8 Pop!_OS 22.04 LTS
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11900K @ 3.50GHz
    Memory: 42.07 GB / 62.42 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.0/bin/npm
    pnpm: 9.1.0 - ~/.nvm/versions/node/v18.18.0/bin/pnpm
  Browsers:
    Chrome: 125.0.6422.76
  npmPackages:
    @aws-amplify/backend: ^1.0.2 => 1.0.2 
    @aws-amplify/ui-react: ^6.1.9 => 6.1.9 
    @aws-amplify/ui-react-core: ^3.0.14 => 3.0.14 
    @heroicons/react: ^2.1.3 => 2.1.3 
    @types/react: ^18.2.66 => 18.3.2 
    @types/react-dom: ^18.2.22 => 18.3.0 
    @typescript-eslint/eslint-plugin: ^7.2.0 => 7.8.0 
    @typescript-eslint/parser: ^7.2.0 => 7.8.0 
    @vitejs/plugin-react-swc: ^3.5.0 => 3.6.0 
    autoprefixer: ^10.4.19 => 10.4.19 
    aws-amplify: ^6.3.0 => 6.3.0 
    clsx: ^2.1.1 => 2.1.1 
    eslint: ^8.57.0 => 8.57.0 
    eslint-plugin-react-hooks: ^4.6.0 => 4.6.2 
    eslint-plugin-react-refresh: ^0.4.6 => 0.4.7 
    framer-motion: ^10.10.0 => 10.18.0 
    postcss: ^8.4.38 => 8.4.38 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 
    react-dropzone: ^14.2.3 => 14.2.3 
    react-icons: ^4.8.0 => 4.12.0 
    react-router-dom: ^6.9.0 => 6.23.1 
    react-toastify: ^9.1.2 => 9.1.3 
    tailwind-merge: ^2.3.0 => 2.3.0 
    tailwindcss: ^3.4.3 => 3.4.3 
    typescript: ^5.2.2 => 5.4.5 
    vite: ^5.2.0 => 5.2.11 
  npmGlobalPackages:
    @withgraphite/graphite-cli: 1.3.4
    corepack: 0.19.0
    nodemon: 3.1.0
    npm: 9.8.1
    pnpm: 9.1.1
    typescript: 5.4.5

Describe the bug

trying to upload a APK file to S3 bucket but facing Multipart issue

Expected behavior

Just normal file upload

Reproduction steps

Code

>  const handleFileSelect = async (file: File) => {
>     try {
>       const awsfile = uploadData({
>         data: file,
>         path({ identityId }) {
>           return `uploads/${identityId}/test_${file.name}`;
>         },
>         options: {
>           // metadata: {
>           //   date: `${Date.now()}`,
>           // },
>           contentEncoding: "base64",
>           contentType: "application/vnd.android.package-archive",
>           contentDisposition: "attachment",
>           onProgress: ({ transferredBytes, totalBytes }) => {
>             if (totalBytes) {
>               console.log(
>                 `Upload progress ${Math.round(
>                   (transferredBytes / totalBytes) * 100
>                 )} %`
>               );
>             }
>           },
>         },
>       }).result;
> 
>       console.log(awsfile.then((res) => console.log(res)));
>     } catch (err) {
>       console.log(err);
>     }
> 

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line

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

[cwomack]

Hey, @BalajiSriraman 👋. Can you clarify what size the file is that you're attempting to upload? And what's the total time it's taking to upload the file?

[BalajiSriraman]

Hi @cwomack

around 9mb .apk file, but issue persists with files of size 300mb too

upload is quite quick, have got a 30mbps connection so around 3 sec for 9mb file

[cwomack]

@BalajiSriraman, thank you for the additional context. We'll try to reproduce on our side and see if we can root cause the issue.

[jl4nz]

I have the same issue, randomly (on v6.4.3). For small files on KB doesn't seem to happen, but when using this library on MB files (pdf 6MB in my case) , the uploader.result promise gets randomly rejected and next time for the same file returns status:"fulfilled" re-using the same parts that uploaded the failed attempt.

I'm using a bucket created externally from Amplify CLI... but added the exposedHeaders: 'x-amz-server-side-encryption', 'x-amz-request-id', 'x-amz-id-2', 'ETag'

[jl4nz]

After some more investigation, I got this working after the bucket is configured with the following CORS config.

For example:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "POST",
            "GET",
            "HEAD",
            "DELETE",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag",
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]

Maybe this can be an issue of just adding to the docs that when importing a S3 bucket, add the correct config.

[antoineaws]

Same issue here, multi-part upload fails with version 6.5.3 with the above error Error: Invalid parameter for ComplteMultipartUpload API: [object Object] (note typo in error message - CompleteMultipartUpload).

In my case user only has s3:PutObject permissions on bucket. I tried the above settings and it got me further where now the file uploads but Amplify Storage - uploadData crashes on the GET and HEAD which come at the end.

GET https://xxx.s3.xxx.amazonaws.com/upload/xxx.png?uploadId=xxx  results in 404
HEAD https://xxx.s3.xxx.amazonaws.com/upload/xxx.png results in 403

Why do we need to execute the above 2 calls?