How to Get a File or Blob from an Object Url

fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
  .then(res => res.blob()) // Gets the response and returns it as a blob
  .then(blob => {
    // Here's where you get access to the blob
    // And you can use it for whatever you want
    // Like calling ref().put(blob)

    // Here, I use it to make an image appear on the page
    let objectURL = URL.createObjectURL(blob);
    let myImage = new Image();
    myImage.src = objectURL;
    document.getElementById('myImg').appendChild(myImage)
});

<div id="myImg"></div>

Get Blob object back from blob URL created with URL.createObjectURL

See this answer of mine for a way to retrieve the Blob from a blob: URI (you need to run the script there before the Blob is created by the page). Fetching only creates a copy.

The blob: URL is linked to the remote server in that it shares the same origin. So yes, the Blob (binary data) is on your computer, but the URL is only accessible to scripts running from the same origin than the one it was generated from.

And yes, the Blob does contain all the video data, but the string you have is a blob: URL, which is only a pointer to that Blob, itself stored in the browser's memory.

Convert Blob URL to file object with axios

Apparently what I tried was a bit overkill. Here's the solution that worked for me:

const config = { responseType: 'blob' };
axios.get(blobUrl, config).then(response => {
    new File([response.data], fileName);       
});

Read data from blob url

I've done some research because I'm also interessted in this question and I think the only possibility is do to a XHR request. I think it was already disscussed here: How to get a file or blob from an object URL?

If you have a blob you can convert it with FileReader to a ArrayBuffer. But maybe also the following could work:

xhr.responseType = 'arraybuffer';

How to create file object of pdf from blob url (URL.createObjectURL())

To convert Blob object url of PDF or Image to File object

var file_object = fetch('blob:http://0.0.0.0:5002/e468fb70-d597-4b17-bb3a-ec6272f2d7fe') 
          .then(r => r.blob())
          .then(blob => {
              var file_name = Math.random().toString(36).substring(6) + '_name.pdf'; //e.g ueq6ge1j_name.pdf
              var file_object = new File([blob], file_name, {type: 'application/pdf'});
              console.log(file_object); //Output
           });
//------- 

To convert Base64 of Image to File object

var file_object = fetch('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA') 
          .then(r => r.blob())
          .then(blob => {
              var file_name = Math.random().toString(36).substring(6) + '_name.jpeg'; //e.g ueq6ge1j_name.jpeg
              var file_object = new File([blob], file_name, {type: 'application/jpeg'});
              console.log(file_object); //Output
           });
//------- 

---

Related Topics