How to get a file or blob from an object URL

Question

I am allowing the user to load images into a page via drag amp 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

User · Accepted Answer

Modern solution   let blob   await fetch url  then r   gt  r blob       The url can be an object url or a normal url

User · Answer

If you show the file in a canvas anyway you can also convert the canvas content to a blob object   canvas toBlob function my file        toBlob is only implemented in  gt  FF18 but there is a polyfill      for other browsers https   github com blueimp JavaScript-Canvas-to-Blob   var myBlob    my file

User · Answer

Unfortunately  BrianFreud s answer doesn t fit my needs  I had a little different need  and I know that is not the answer for  BrianFreud s question  but I am leaving it here because a lot of persons got here with my same need  I needed something like  How to get a file or blob from an URL    and the current correct answer does not fit my needs because its not cross-domain   I have a website that consumes images from an Amazon S3 Azure Storage  and there I store objects named with uniqueidentifiers   sample  http        blob core windows net systemimages bf142dc9-0185-4aee-a3f4-1e5e95a09bcf  Some of this images should be download from our system interface  To avoid passing this traffic through my HTTP server  since this objects does not require any security to be accessed  except by domain filtering   I decided to make a direct request on user s browser and use local processing to give the file a real name and extension   To accomplish that I have used this great article from Henry Algus  http   www henryalgus com reading-binary-files-using-jquery-ajax   1  First step  Add binary support to jquery          jquery binarytransport js      description  jQuery ajax transport for making binary data type requests     version 1 0     author Henry Algus  lt henryalgus gmail com gt           use this transport for  binary  data type   ajaxTransport   binary   function  options  originalOptions  jqXHR           check for conditions and support for blob   arraybuffer response type     if  window FormData  amp  amp    options dataType  amp  amp   options dataType     binary        options data  amp  amp    window ArrayBuffer  amp  amp  options data instanceof ArrayBuffer      window Blob  amp  amp  options data instanceof Blob                return                  create new XMLHttpRequest             send  function  headers  callback                       setup all variables                 var xhr   new XMLHttpRequest            url   options url          type   options type          async   options async    true             blob or arraybuffer  Default is blob         dataType   options responseType     blob           data   options data    null          username   options username    null          password   options password    null                   xhr addEventListener  load   function                          var data                           data options dataType    xhr response                         make callback and send data                     callback xhr status  xhr statusText  data  xhr getAllResponseHeaders                                          xhr open type  url  async  username  password                       setup custom headers                 for  var i in headers                        xhr setRequestHeader i  headers i                                       xhr responseType   dataType                  xhr send data                              abort  function                      jqXHR abort                                         2  Second step  Make a request using this transport type   function downloadArt url          ajax url            dataType   binary           processData  false        done function  data               just my logic to name create files         var filename   url substr url lastIndexOf        1      png           var blob   new Blob  data     type   image png               saveAs blob  filename               Now you can use the Blob created as you want to  in my case I want to save it to disk   3  Optional  Save file on user s computer using FileSaver  I have used FileSaver js to save to disk the downloaded file  if you need to accomplish that  please use this javascript library   https   github com eligrey FileSaver js   I expect this to help others with more specific needs

User · Answer

Using fetch for example like below     fetch  lt  yoururl  gt         method   GET       headers             Content-Type    application json            Authorization    Bearer      lt your access token if need gt                    then  response    gt  response blob     then  blob    gt       2  Create blob link to download  const url   window URL createObjectURL new Blob  blob     const link   document createElement  a    link href   url  link setAttribute  download    sample xlsx        3  Append to html page  document body appendChild link       4  Force download  link click        5  Clean up and remove the link  link parentNode removeChild link        You can paste in on Chrome console to test  the file with download with  sample xlsx  Hope it can help

User · Answer

As gengkev alludes to in his comment above  it looks like the best only way to do this is with an async xhr2 call   var xhr   new XMLHttpRequest    xhr open  GET    blob http 3A  your blob url here   true   xhr responseType    blob   xhr onload   function e      if  this status    200        var myBlob   this response         myBlob is now the blob that the object URL pointed to         xhr send      Update  2018   For situations where ES5 can safely be used  Joe has a simpler ES5-based answer below

User · Answer

See Getting BLOB data from XHR request which points out that BlobBuilder doesn t work in Chrome so you need to use   xhr responseType    arraybuffer

User · Answer

Maybe someone finds this useful when working with React Node Axios  I used this for my Cloudinary image upload feature with react-dropzone on the UI       axios           method   get           url  file 0  preview     blob url eg  blob http   127 0 0 1 8000 e89c5d87-a634-4540-974c-30dc476825cc         responseType   blob         then function response            var reader   new FileReader             reader readAsDataURL response data             reader onloadend   function                  var base64data   reader result               self props onMainImageDrop base64data

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

Examples related to javascript

Examples related to html

Examples related to fileapi

Examples related to blobs