Uploading images to S3 bucket from browser via NodeJs

Question

I'm trying to upload images from the browser to Amazon S3, and the code below sends some sort of blob to Amazon S3 just fine, I can't read the resulting file in a browser. It doesn't seem to know it's an image file.

I send it to NodeJS from the browser:

let myReader=new FileReader();
myReader.onloadend=(e)=>{ app.ws.send(myReader.result); }
myReader.readAsDataURL(e.target.files[0]);  

In NodeJS I send it to S3:

const s3=new AWS.S3();
const params= { Bucket:<bucketName>, Key:fileName, Body:imgData, ACL:"public-read", ContentEncoding:'base64' };
s3.putObject(params, (err, data)=>{
    if (err) throw err; 
});

Answer 1

Check AWS S3 guide, This doc contains the logic needed to upload image from browser to S3 bucket

https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html

Answer 2

Turns out you need to modify the base64 image data coming in and explicitly set the ContentType:

const s3=new AWS.S3();
const type = imgData.split(';')[0].split('/')[1];
imgData= new Buffer.from(imgData.replace(/^data:image\/\w+;base64,/, ""), 'base64');
let params = { Bucket:<bucketName>, Key:fileName, Body:imgData, 
    ACL:"public-read", ContentType:"image."+type, ContentEncoding: 'base64' };

s3.upload(params, (err, data)=>{
    if (err) throw err;
    ... Do something ... 
    });