Improvement: Update to retrieve all presigned urls in one network call, instead of having to make a call for each and every uploaded part.

[NguyenAndrew]

Thank you for this example repo for frontend multipart presigned url uploads.

I noticed a change that will help improve performance, and will help anyone taking this approach! This issue has been made to get this improvement implemented.

Context

The current frontend code does something like this

for (let index = 1; index < NUM_CHUNKS + 1; index++) {
    start = (index - 1)*FILE_CHUNK_SIZE
    end = (index)*FILE_CHUNK_SIZE
    blob = (index < NUM_CHUNKS) ? this.state.selectedFile.slice(start, end) : this.state.selectedFile.slice(start)

    // (1) Generate presigned URL for each part
    let getUploadUrlResp = await axios.get(`${this.state.backendUrl}/get-upload-url`, {
        params: {
            fileName: this.state.fileName,
            partNumber: index,
            uploadId: this.state.uploadId
        }
     })
    ...
}
...

This previous code creates a growing network cost. Larger files will have more NUM_CHUNKS (parts) then smaller files, so this call will be made more times for larger files (compared to smaller files).

However, even though larger files will normally take longer to upload anyway, this cost in particular can be avoided! An example of this improvement is shown below:

let getUploadUrlResp = await axios.get(`${this.state.backendUrl}/get-upload-urls`, {
    params: {
        fileName: this.state.fileName,
        numberOfParts: NUM_CHUNKS
        uploadId: this.state.uploadId
    }
});

for (let index = 1; index < NUM_CHUNKS + 1; index++) {
    ...
}
...

This change converts /get-upload-url being called NUM_CHUNKS times, to /get-upload-urls being called a single time (no matter the file size!).

As part of fixing this issue, the following should be done:

• Update frontend code to use single network call
• Convert and update logic /get-upload-url to /get-upload-urls
• Bonus: Comment on the following GitHub issue showing off new changes for visibility and recognition! S3: Support for multipart upload using presigned url aws/aws-sdk-js#1603