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 =
// 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");