How to get a file or blob from an object URL?

javascript html fileapi blobs
BrianFreud picture BrianFreud · Aug 9, 2012 · Viewed 159.9k times · Source

I am allowing the user to load images into a page via drag&drop and other methods. When an image is dropped, I'm using URL.createObjectURL to convert to an object URL to display the image. I am not revoking the url, as I do reuse it.

So, when it comes time to create a FormData object so I can allow them to upload a form with one of those images in it, is there some way I can then reverse that Object URL back into a Blob or File so I can then append it to a FormData object?

Answer

user993683 picture user993683 · Sep 19, 2018

Modern solution:

let blob = await fetch(url).then(r => r.blob());

The url can be an object url or a normal url.

Related questions

Getting byte array through input type = file

I am using ajax call to post byte[] value of a input type = file input to web api which receives in byte[] format. However, I am experiencing difficulty of getting byte array. I am expecting that we can get the …

Read More
Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)

Is there any way of reading the contents of a HTML Canvas as binary data? At the moment I've got the following HTML to show an input file and the canvas below it: <p><button id="myButton" …

Read More
parameter is not of type 'Blob'

I have written the code below to display the text from a local file using the file API but when I click the button, nothing happens. I get the following error when I inspect the element in the browser. What …

Read More