Sometimes, we want to convert data URI to File and then append to FormData with JavaScript.
In this article, we’ll look at how to convert data URI to File and then append to FormData with JavaScript.
How to convert data URI to File and then append to FormData with JavaScript?
To convert data URI to File and then append to FormData with JavaScript, we use fetch.
For instance, we write
const url =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
const res = await fetch(url);
const blob = await res.blob();
const fd = new FormData();
fd.append("image", blob, "filename");
console.log(blob);
to call fetch
with the base64 url
.
Then we call res.blob
to get the blob object from the promise.
Next, we call fd.append
to attach the blob
with key 'image'
and file name 'filename'
.
Conclusion
To convert data URI to File and then append to FormData with JavaScript, we use fetch.