Convert Data URI to File then append to FormData

Question

I've been trying to re-implement an HTML5 image uploader like the one on the Mozilla Hacks site, but that works with WebKit browsers. Part of the task is to extract an image file from the canvas object and append it to a FormData object for upload.

The issue is that while canvas has the toDataURL function to return a representation of the image file, the FormData object only accepts File or Blob objects from the File API.

The Mozilla solution used the following Firefox-only function on canvas:

var file = canvas.mozGetAsFile("foo.png");

...which isn't available on WebKit browsers. The best solution I could think of is to find some way to convert a Data URI into a File object, which I thought might be part of the File API, but I can't for the life of me find something to do that.

Is it possible? If not, any alternatives?

Lingonberry

If you want to save the DataURI of an image in server: https://mcmap.net/q/42100/-how-do-i-take-picture-from-client-side-html-and-save-it-to-server-side-python – Maryleemarylin

Answer 1

After playing around with a few things, I managed to figure this out myself.

First of all, this will convert a dataURI to a Blob:

function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}

From there, appending the data to a form such that it will be uploaded as a file is easy:

var dataURL = canvas.toDataURL('image/jpeg', 0.5);
var blob = dataURItoBlob(dataURL);
var fd = new FormData(document.forms[0]);
fd.append("canvasImage", blob);

Lingonberry

Why does this always happen... You try to solve a problem for hours upon hours with SO searches here and there. Then you post a question. Within an hour you get the answer from another question. Not that I'm complaining... #9388912 – Auriculate

@stoive I am able to contruct Blob but can you please explain how do you construct the POST or PUT to S3 ? – Timeconsuming

@stoive I can't understand why you build the Uint8Array object. Where do you use it? – Harem

@mimo - It points to the underlying ArrayBuffer, which is then written to the BlobBuilder instance. – Lingonberry

@stoive In that case why it's not bb.append(ia)? – Harem

Question.. once we have the blob appended to a form.. how do we actually present that as a file with parse? for example with parse, I would do something like var parseFile = new Parse.File(name, file)... – Headmost

You missed a semicolon on var mimeString, jshint tests failed – Mccrory

Came here from a comment on my q [here]( #32662675). Note I wanted to use the file, not append it to a form, so I found this method: URL.createObjectURL()., which return the filename as a string. – Cubic

Thanks! This solved my problem with a small correction var file = new File( [blob], 'canvasImage.jpg', { type: 'image/jpeg' } ); fd.append("canvasImage", file); – Rhodarhodamine

This is great!! Please note to set a suitable value for the quality. The 0.5 of the example is not suitable for anybody (e.g. me :)). Also notice that for .jpg images you will have lost any exif data after manipulation in the canvas. – Kif

I am having a similar issue - trying to upload canvas picture to facebook. Why do you append it to the form? Is there no way to convert it to multipart/form-data without it? – Neurosurgery

unescape is deprecated, should we use decodeURIComponent or decodeURI? – Entirely

I find it really impressive that you found this all by trying yourself! – Echinoid

please telle me if i need to convert a selected file from input type file in dataurl to blob how can i process – Percolate

I am having a problem with this on Safari. I create image file from base 64 string like this but then when image is uploaded it seems like something is wrong – Wooden

After I have fd.append("canvasImage", blob); how do I upload the file? – Batts

If the file is empty, the blob wil contain the string 'undefined'; – Ezaria

@Auriculate I've come to the conclusion sometimes you when you write or share your issues it sorts out everything in your mind. countless times ive come up with solutions after writing long texts asking for help. – Conscription

Answer 2

BlobBuilder and ArrayBuffer are now deprecated, here is the top comment's code updated with Blob constructor:

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'});
}

Gloriane

Just an idea: array=[]; array.length=binary.length; ... array[i]=bina... etc. So the array is pre-allocated. It saves a push() having to extend the array each iteration, and we're processing possibly millions of items (=bytes) here, so it matters. – Thespian

Also fails for me on Safari. @WilliamT. 's answer works for Firefox/Safari/Chrome, though. – Dishwater

"binary" is a slightly misleading name, as it is not an array of bits, but an array of bytes. – Gingerly

"type: 'image/jpeg'" - what if it is a png image OR if you do not know the image extension in advance? – Hartle

Create Uint8Array at first is better than create a Array and then convert to Uint8Array. – Vani

why don't you read mime type from dataURI? – Ezaria

If you want to send the blob as a file to the server, you can use: let blob = dataURItoBlob(dataURL); var file = new File([blob], "yourfile.jpg"); – Sealy

Answer 3

This one works in iOS and Safari.

You need to use Stoive's ArrayBuffer solution but you can't use BlobBuilder, as vava720 indicates, so here's the mashup of both.

function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], { type: 'image/jpeg' });
}

Stutzman

Great! But you could still keep the mime string dynamic, like in Stoive's solution, I suppose? // separate out the mime component var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0] – Constant

What is with the fallback for iOS6 with webkit prefix? How do you handle this? – Millar

Answer 4

Firefox has canvas.toBlob() and canvas.mozGetAsFile() methods.

But other browsers do not.

We can get dataurl from canvas and then convert dataurl to blob object.

Here is my dataURLtoBlob() function. It's very short.

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

Use this function with FormData to handle your canvas or dataurl.

For example:

var dataurl = canvas.toDataURL('image/jpeg',0.8);
var blob = dataURLtoBlob(dataurl);
var fd = new FormData();
fd.append("myFile", blob, "thumb.jpg");

Also, you can create a HTMLCanvasElement.prototype.toBlob method for non gecko engine browser.

if(!HTMLCanvasElement.prototype.toBlob){
    HTMLCanvasElement.prototype.toBlob = function(callback, type, encoderOptions){
        var dataurl = this.toDataURL(type, encoderOptions);
        var bstr = atob(dataurl.split(',')[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        var blob = new Blob([u8arr], {type: type});
        callback.call(this, blob);
    };
}

Now canvas.toBlob() works for all modern browsers not only Firefox. For example:

canvas.toBlob(
    function(blob){
        var fd = new FormData();
        fd.append("myFile", blob, "thumb.jpg");
        //continue do something...
    },
    'image/jpeg',
    0.8
);

Vani

The polyfill for canvas.toBlob mentioned here is the correct way to handle this issue IMHO. – Reddish

I would like to emphasize the last thing in this post: "Now canvas.toBlob() works for all modern browsers." – Nobell

Answer 5

My preferred way is canvas.toBlob()

But anyhow here is yet another way to convert base64 to a blob using fetch.

const url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

fetch(url)
.then(res => res.blob())
.then(blob => {
  const fd = new FormData()
  fd.append('image', blob, 'filename')
  
  console.log(blob)

  // Upload
  // fetch('upload', { method: 'POST', body: fd })
})

Eosinophil

what is fetch and how is it relevant? – Hakon

Fetch is a modern ajax method that you can use instead of XMLHttpRequest since data url is just a url, You can use ajax to fetch that resource and you got yourself an option to decide if you want it as blob, arraybuffer or text – Eosinophil

@Eosinophil 'fetch()' a local base64 string... a really clever hack! – Silversmith

Keep in mind that blob: and data: are not universally supported by all fetch implementations. We use this approach, since we know we will only deal with mobile browsers (WebKit), but Edge for instance, do no support itt: developer.mozilla.org/en-US/docs/Web/API/… – Venetis

Related answer which adds new File – Enravish

Answer 6

Thanks to @Stoive and @vava720 I combined the two in this way, avoiding to use the deprecated BlobBuilder and ArrayBuffer

function dataURItoBlob(dataURI) {
    'use strict'
    var byteString, 
        mimestring 

    if(dataURI.split(',')[0].indexOf('base64') !== -1 ) {
        byteString = atob(dataURI.split(',')[1])
    } else {
        byteString = decodeURI(dataURI.split(',')[1])
    }

    mimestring = dataURI.split(',')[0].split(':')[1].split(';')[0]

    var content = new Array();
    for (var i = 0; i < byteString.length; i++) {
        content[i] = byteString.charCodeAt(i)
    }

    return new Blob([new Uint8Array(content)], {type: mimestring});
}

Harem

Answer 7

The evolving standard looks to be canvas.toBlob() not canvas.getAsFile() as Mozilla hazarded to guess.

I don't see any browser yet supporting it :(

Thanks for this great thread!

Also, anyone trying the accepted answer should be careful with BlobBuilder as I'm finding support to be limited (and namespaced):

    var bb;
    try {
        bb = new BlobBuilder();
    } catch(e) {
        try {
            bb = new WebKitBlobBuilder();
        } catch(e) {
            bb = new MozBlobBuilder();
        }
    }

Were you using another library's polyfill for BlobBuilder?

Goddaughter

I was using Chrome with no polyfills, and don't recall coming across namespacing. I eagerly anticipate canvas.toBlob() - it seems much more appropriate than getAsFile. – Lingonberry

BlobBuilder seem to be deprecated in favor of Blob – Unmoving

BlobBuilder is deprecated and this pattern is awful. Better would be : window.BlobBuilder = (window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder); the nested try catches are really ugly and what happens if none of the builders are available? – Gangrene

How is this awful? If an exception is thrown and 1) BlobBuilder doesn't exist then nothing happens and the next block is executed. 2) If it does exist, but an exception is thrown then it is deprecated and shouldn't be used anyway, so it continues into the next try block. Ideally you would check if Blob is supported first, and even before this check for toBlob support – Renaldorenard

Answer 8

var BlobBuilder = (window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder);

can be used without the try catch.

Thankx to check_ca. Great work.

Burnett

This will still throw an error if the browser supports the deprecated BlobBuilder. The browser will use the old method if it supports it, even if it supports the new method. This is not desired, see Chris Bosco's approach below – Renaldorenard

Answer 9

Here is an ES6 version of Stoive's answer:

export class ImageDataConverter {
  constructor(dataURI) {
    this.dataURI = dataURI;
  }

  getByteString() {
    let byteString;
    if (this.dataURI.split(',')[0].indexOf('base64') >= 0) {
      byteString = atob(this.dataURI.split(',')[1]);
    } else {
      byteString = decodeURI(this.dataURI.split(',')[1]);
    }
    return byteString;
  }

  getMimeString() {
    return this.dataURI.split(',')[0].split(':')[1].split(';')[0];
  }

  convertToTypedArray() {
    let byteString = this.getByteString();
    let ia = new Uint8Array(byteString.length);
    for (let i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return ia;
  }

  dataURItoBlob() {
    let mimeString = this.getMimeString();
    let intArray = this.convertToTypedArray();
    return new Blob([intArray], {type: mimeString});
  }
}

Usage:

const dataURL = canvas.toDataURL('image/jpeg', 0.5);
const blob = new ImageDataConverter(dataURL).dataURItoBlob();
let fd = new FormData(document.forms[0]);
fd.append("canvasImage", blob);

Yee

Answer 10

The original answer by Stoive is easily fixable by changing the last line to accommodate Blob:

function dataURItoBlob (dataURI) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);
    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to an ArrayBuffer
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    // write the ArrayBuffer to a blob, and you're done
    return new Blob([ab],{type: mimeString});
}

Youth

Answer 11

Thanks! @steovi for this solution.

I have added support to ES6 version and changed from unescape to dataURI(unescape is deprecated).

converterDataURItoBlob(dataURI) {
    let byteString;
    let mimeString;
    let ia;

    if (dataURI.split(',')[0].indexOf('base64') >= 0) {
      byteString = atob(dataURI.split(',')[1]);
    } else {
      byteString = encodeURI(dataURI.split(',')[1]);
    }
    // separate out the mime component
    mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], {type:mimeString});
}

Unblinking

For anyone getting the deprecation warning on atob() - It's deprecated on node.js, you can use Buffer.from() now. Not deprecated in-browser, to hide the warning just use window.atob() – Tutorial

Answer 12

make it simple :D

function dataURItoBlob(dataURI,mime) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs

    var byteString = window.atob(dataURI);

    // separate out the mime component


    // write the bytes of the string to an ArrayBuffer
    //var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    // write the ArrayBuffer to a blob, and you're done
    var blob = new Blob([ia], { type: mime });

    return blob;
}

Toneytong

Answer 13

toDataURL gives you a string and you can put that string to a hidden input.

Photoluminescence

Could you please give an example? I don't wan't to upload a base64 string (which is what doing <input type=hidden value="data:..." /> would do), I want to upload the file data (like what <input type="file" /> does, except you're not allowed to set the value property on these). – Lingonberry

This should be a comment rather than an answer. Please elaborate the answer with proper explanation. @Cat Chen – Alcot

Answer 14

I had exactly the same problem as Ravinder Payal, and I've found the answer. Try this:

var dataURL = canvas.toDataURL("image/jpeg");

var name = "image.jpg";
var parseFile = new Parse.File(name, {base64: dataURL.substring(23)});

Liner

Are you really suggesting to use Parse.com ? You should mention that your answer require dependencies ! – Doud

WTF ? Why any one will upload base64 code of image to PARSE server and then download?When we can directly upload base64 on our servers and main thing is that it takes same data to upload base64 string or image file. And if you just want to alow user to download the image , you can use this window.open(canvas.toDataURL("image/jpeg")) – Alcahest