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

Modern solution:

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

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

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.

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