Checksum missing part 1

[zshzbh]

Checkboxes for prior research

• I've gone through Developer Guide and API reference
• I've checked AWS Forums and StackOverflow.
• I've searched for previous similar issues and didn't find any solution.

Describe the bug

Original reported from @Mette1982 - #6810 (comment)

This works indeed perfectly on a NodeJs environment but if I execute the same in a NextJs (executed in the browser) app for instance it no longer works.

The user created a small NextJs app to demonstrate my issue using the code sample you provided => https://github.com/Mette1982/aws-s3-error

You only have to change values in the https://github.com/Mette1982/aws-s3-error/blob/main/src/app/upload.tsx file.

Dependencies -

        "@aws-sdk/client-s3": "^3.730.0",
        "@aws-sdk/lib-storage": "^3.730.0",
        "next": "15.1.5",
        "react": "^19.0.0",
        "react-dom": "^19.0.0"

Regression Issue

• Select this option if this issue appears to be a regression.

SDK version number

@aws-sdk/lib-storage; @aws-sdk/client-s3

Which JavaScript Runtime is this issue in?

Node.js

Details of the browser/Node.js/ReactNative version

20.18

Reproduction Steps

Whole next js is in - https://github.com/Mette1982/aws-s3-error/blob/main/src/app/upload.tsx file.
The file that handle upload requeset -

'use client'

import {ChecksumAlgorithm, S3Client} from "@aws-sdk/client-s3";
import {Upload} from "@aws-sdk/lib-storage";
import {useState} from "react";

export default function UploadCmp() {

    const [text, setText] = useState<string[]>([]);
    const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.files) {

            try {
                const file = Array.from(e.target.files)[0];

                const parallelUploads3 = new Upload({
                    client: new S3Client({
                        region: "us-east-1",
                        credentials: {
                            accessKeyId: "xxx",
                            secretAccessKey: "xxxx",
                        },
                    }),
                    params: {
                        Bucket: "new-bucket-maggie-ma",
                        Key: "large-file.txt",
                        Body: file,
                        // Ensure proper content type
                        ContentType: "text/plain",
                        ChecksumAlgorithm: ChecksumAlgorithm.CRC32,
                    },
                    //  part size 5MB
                    partSize: 1024 * 1024 * 5,
                    queueSize: 1,
                    leavePartsOnError: true,
                });

                // Log upload progress
                parallelUploads3.on("httpUploadProgress", (progress) => {
                    const progressText = `Uploaded ${progress.loaded} of ${progress.total} bytes`;

                    setText(prevState => [...prevState, progressText]);
                    console.log(progressText);
                });

                await parallelUploads3.done();

                const doneMessage = "File uploaded successfully";
                setText(prevState => [...prevState, doneMessage]);
                console.log(doneMessage);
            } catch (error: any) {
                setText(prevState => [...prevState, "Upload error see console"]);
                console.error("Upload error:", error);
                // Log more details about the error
                if (error.message) console.error("Error message:", error.message);
                if (error.code) console.error("Error code:", error.code);

            }
        }
    };


    return (
        <div>
            <input type="file" onChange={handleFileChange}/>
            <div>
                {text.map((value, index) => (
                    <div key={index}>{value}</div>
                ))}
            </div>
        </div>
    );
}

Observed Behavior

Got error

Failed to load resource: the server responded with a status of 400 (Bad Request)
node_modules_next_dist_client_523921._.js:994 Upload error: InvalidRequest: The upload was created using a crc32 checksum. The complete request must include the checksum for each part. It was missing for part 1 in the request.
    at de_InvalidRequestRes (http://localhost:3000/_next/static/chunks/node_modules_@aws-sdk_client-s3_885f07._.js:6345:23)
    at de_CommandError (http://localhost:3000/_next/static/chunks/node_modules_@aws-sdk_client-s3_885f07._.js:6280:25)
    at async http://localhost:3000/_next/static/chunks/node_modules_@smithy_b64847._.js:2035:32
    at async http://localhost:3000/_next/static/chunks/node_modules_@aws-sdk_35ca9f._.js:2281:28
    at async http://localhost:3000/_next/static/chunks/node_modules_@smithy_b64847._.js:9279:54
    at async http://localhost:3000/_next/static/chunks/node_modules_@aws-sdk_35ca9f._.js:1823:32
    at async http://localhost:3000/_next/static/chunks/node_modules_@aws-sdk_35ca9f._.js:1864:24
    at async http://localhost:3000/_next/static/chunks/node_modules_@aws-sdk_35ca9f._.js:3664:34
    at async Upload.__doMultipartUpload (http://localhost:3000/_next/static/chunks/node_modules_@aws-sdk_35ca9f._.js:512:22)
    at async Upload.done (http://localhost:3000/_next/static/chunks/node_modules_@aws-sdk_35ca9f._.js:295:16)
    at async handleFileChange (http://localhost:3000/_next/static/chunks/src_app_97e46c._.js:60:17)
error @ node_modules_next_dist_client_523921._.js:994
node_modules_next_dist_client_523921._.js:994 Error message: The upload was created using a crc32 checksum. The complete request must include the checksum for each part. It was missing for part 1 in the request.

Expected Behavior

expect it to work successfully

Possible Solution

No response

Additional Information/Context

No response