Create blob and file from data uri

Creating a file in client side (browser) is something we may have to do frequently. Every time I have to work with it I try to google and always end up with the long solution. After digging and doing some research I found this clean way to create file and blob from data uri.

const url =

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

// Will create a blob from data uri

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

// Now we create a file using that blob where we can give name to that blob.

// File extends blob internally.

const file = new File([blob], "example.png");