How to create File object from Blob? How to create File object from Blob? javascript javascript

How to create File object from Blob?


The File constructor (as well as the Blob constructor) takes an array of parts. A part doesn't have to be a DOMString. It can also be a Blob, File, or a typed array. You can easily build a File out of a Blob like this:

new File([blob], "filename")

Please refrain from stating that browsers don't implement the spec or that the spec is useless if you don't take the time to understand the spec process or the spec itself.


This was the complete syntax which I had to use to convert a blob into a file, which I later had to save to a folder using my server.

var file = new File([blob], "my_image.png",{type:"image/png", lastModified:new Date().getTime()})


this works with me, from canvas to File [or Blob], with filename!

var dataUrl = canvas.toDataURL('image/jpeg');var bytes = dataUrl.split(',')[0].indexOf('base64') >= 0 ?          atob(dataUrl.split(',')[1]) :          (<any>window).unescape(dataUrl.split(',')[1]);var mime = dataUrl.split(',')[0].split(':')[1].split(';')[0];var max = bytes.length;var ia = new Uint8Array(max);for (var i = 0; i < max; i++) {  ia[i] = bytes.charCodeAt(i);}var newImageFileFromCanvas = new File([ia], 'fileName.jpg', { type: mime });

Or if you want a blob

var blob = new Blob([ia], { type: mime });