Question

98

How to upload base64 encoded image data to S3 using JavaScript only?

rated 0 times [ 101] [ 3] / answers: 1 / hits: 17637 / 12 Years ago, sun, october 14, 2012, 12:00:00

I have a rails app on Heroku (cedar env). It has a page where I render the canvas data into an image using toDataURL() method. I'm trying to upload the returned base64 image data string directly to s3 using JavaScript (bypassing the server-side). The problem is that since this isn't a file, how do I upload the base64 encoded data directly to S3 and save it as a file there?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

elijahm

Add To Favorites

Follow

Total Points: 674

Total Questions: 124

Total Answers: 79

Location: Northern Mariana Islands

Member since Fri, Jan 15, 2021

3 Years ago

answered 12 Years ago elishaannac · Accepted Answer

I have found a way to do this. After a lot of searching a looking at different tutorials.

You have to convert the Data URI to a blob and then upload that file to S3 using CORS, if you are working with multiple files I have separate XHR requests for each.

I found this function which turns your the Data URI into a blob which can then be uploaded to S3 directly using CORS (Convert Data URI to Blob )

function dataURItoBlob(dataURI) {

    var binary = atob(dataURI.split(',')[1]);

    var array = [];

    for(var i = 0; i < binary.length; i++) {

        array.push(binary.charCodeAt(i));

    }

    return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});

}

Here is a great tutorial on uploading directly to S3, you will need to customise the code to allow for the blob instead of files.