How to get a File() or Blob() from an URL in javascript?
77,466
Solution 1
Try using the fetch API. You can use it like so:
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>
As of November 2020, the fetch API has about 96% browser support worldwide, with basically just IE missing it. You can get that to near 100% using a polyfill, which I recommend if you're still targeting IE.
Solution 2
@James answer is correct but it is not compatible with all browsers. You can try this jQuery solution :
$.get('blob:yourbloburl').then(function(data) {
var blob = new Blob([data], { type: 'audio/wav' });
});
Solution 3
It did not work until I added credentials
fetch(url, {
headers: {
"Content-Type": "application/octet-stream",
},
credentials: 'include'
})
Solution 4
async function url2blob(url) {
try {
const data = await fetch(url);
const blob = await data.blob();
await navigator.clipboard.write([
new ClipboardItem({
[blob.type]: blob
})
]);
console.log("Success.");
} catch (err) {
console.error(err.name, err.message);
}
}
Author by
Sam
Updated on April 17, 2021Comments
-
Sam about 3 years
I try to upload an image to the Firebase storage from an URL (with
ref().put(file)
)(www.example.com/img.jpg).To do so i need a File or Blob, but whenever I try
new File(url)
it says "not enough arguments“…EDIT: And I actually want to upload a whole directory of files, that’s why i can’t upload them via Console
-
Esko almost 5 yearsThis is not a pure javascript solution but a jQuery one, you should definitely mention that in the answer.
-
stackers over 4 yearswhy use two .thens instead of just one which does res.blob at the beginning
-
James Kraus over 4 yearsres.blob() returns a promise, so we need to wait for it to resolve before accessing the contents: developer.mozilla.org/en-US/docs/Web/API/Body/blob
-
Karolius over 3 yearsYou will probalby get error "No 'Access-Control-Allow-Origin' header is present on the requested resource", if so you can use url proxy like proxy= cors-anywhere.herokuapp.com (or setup your own) then url = proxy + url, and use proxied url to fetch data. Here is a broad answer to this problem stackoverflow.com/a/43268098/9253363