Corrupted image on uploading image to AWS-S3 via signed url

Question

I'm trying to upload images to aws-s3 via a signed-url from NodeJS server (not from a browser). The image to upload has been generated by NodeJS. I'm getting the signed-url from aws and succeeding to upload it to s3.

But my image is corrupted. For some reason, S3 is adding some headers to my image (compare image attached).

What am I doing wrong?

getting the signed url:

    try {
        var params = {
            Bucket: bucketName,
            Key: 'FILE_NAME.png',
            Expires: 60
        };
        const url = await s3.getSignedUrlPromise('putObject', params);
        return url;
    } catch (err) {
        throw err;
    }

uploading to s3

        var stats = fs.statSync(filePath);
        var fileSizeInBytes = stats["size"];
        const imageBuffer = fs.readFileSync(filePath);

        var formData = {
            'file': {
                value: imageBuffer,
                options: {
                    filename: 'FILE_NAME.png'
                }
            }
        };

        request({ 
            method: 'put',
            url, 
            headers: {
                'Content-Length': fileSizeInBytes,
                'Content-MD': md5(imageBuffer)           
            }, 
            formData 
        }, function (err, res, body) {
             console.log('body',body);
        });

Compare between the actual image and the uploaded image to s3. S3 added some headers:

compare

score 33 · Answer 1 · answered Apr 10 '20 at 13:45

33

I know this is old but I struggled with the same issue for a while. When uploading using a pre-sgined url, DO NOT use new FormData();

One thing I noticed that all of my files on s3 were exactly 2kb larger than the originals.

<input type="file" id="upload"/>

var upload = document.getElementById('upload');
var file = upload.files[0];

//COMMENTED OUT BECAUSE IT WAS CAUSING THE ISSUE
//const formData = new FormData();
//formData.append("file", file);

// Assuming axios

const config = {
    onUploadProgress: function(progressEvent) {
        var percentCompleted = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
        );
        console.log(percentCompleted);
    },
    header: {
        'Content-Type': file.type
    }
};

axios.put(S3SignedPutURL, file, config)
   .then(async res => {
        callback({res, key})
    })
    .catch(err => {
        console.log(err);
    })

answered Apr 10 '20 at 13:45

Sam Munroe

1,266
2
20
41

4

Love you man :D, I don't know why there are lots of tutorials and SO posts and all of them using new FormData(), thanks!! – Vlady Sep 24 '20 at 22:31
1

Thanks man! that was what I needed. It is strange those extra 2kb – Ehud Grand Nov 22 '20 at 15:44
1

I wish I could upvote this answer more than once. many thanks! – eplaut Jan 11 '21 at 13:40
Thanks a lot! Do you happen to know how we can upload the file with a different name with this method? – Kashif Imran Jul 08 '21 at 06:39
2

I could kiss you! The rest of the internet told me to use FormData ! – smbergin79 Aug 13 '21 at 07:49
1

This should probably be the accepted answer as it is likely the correct one in most cases. – Appurist - Paul W Jan 26 '22 at 17:25
1

@KashifImran I know I am late but yet you can. I rename the file on the backend when I am calling for s3.getSignedUrl. I'm able to manipulate the key attribute that is passed. – Sam Munroe Apr 14 '22 at 03:25
to those that use fetch (instead of Axios) you can change to "body: file" and it will work (without the form) – Ari Waisberg Oct 20 '22 at 20:11
1

Thank you so much for this. Solved the problem straight away. – Richard Bridge Nov 09 '22 at 19:34
It helped after updating from header to headers on the config object – Charden Daxicen Feb 09 '23 at 17:54

score 3 · Answer 2 · answered Feb 01 '23 at 15:08

3

Came here in 2023, was facing the same problem using formdata, but in postman, before handing it to the front end department.

To handle it in postman, use the type of request body as binary:

And don't forget to add the proper headers.

answered Feb 01 '23 at 15:08

Huthaifa Muayyad

11,321
3
17
49

score 1 · Answer 3 · answered Jan 20 '22 at 10:48

I followed the above solution for react js

What I was doing before uploading an image is passing through the createObject URL and then passing it to the API body.

if (e.target.files && e.target.files[0]) {
            let img = e.target.files[0];
            **setImage(URL.createObjectURL(img))**

Correct Way:

if (e.target.files && e.target.files[0]) {
            let img = e.target.files[0];
            **setImage(img)**

Work For me, Thanks Sam Munroe

score -1 · Answer 4 · answered Oct 23 '19 at 09:57

-1

Try to specify the content type in the request as Content-Type multipart/form-data.

answered Oct 23 '19 at 09:57

szaboat

593
3
11

Corrupted image on uploading image to AWS-S3 via signed url

4 Answers4

Linked