自动将图像上传到s3

Question

I have an upload form that is currently working where the user choose his/her desired avatar/picture. But now I'm integrating facebook api and upon successful registration using FB Javascript SDK, I will then have to upload the user facebook profile pic into our S3.

<img src="https://fullpath/mypic.png" id="image"/>

I've researched around on converting the image to blob or something. So how do I automatically upload mypic.png to my s3? Please any help is appreciated.

Answer 1

Use the AWS JS SDK.

Here is the getting started guide: http://aws.amazon.com/developers/getting-started/browser/

It's actually quite simple once you get the roles setup.

No server side code needed!

Of course you will need to get the image data first like this:

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = 512;
canvas.height = 512;
context.drawImage(img, 0, 0, 512, 512);
var data = canvas.toDataURL('image/webp', 0.5); //webp and 50% compression

var params = {
  Key:Date.now().toString(), //example
  ContentType:'text/plain', //sending a base64 text string
  Body:data //the base64 string is now the body
};

bucket.putObject(params, function(err, data) { ... });

Answer 2

you can't do that from the browser, you need a server side script which will receive your upload and send it to s3. which framework do you use on the server side?