How to convert Base64 String to JavaScript file object like as from file input form?

javascript

async-await

fetch-api

base64-conversion

byAlex Kataev·Sep 26, 2024

Those in a hurry, straight away, here's how you convert a Base64 string to a JavaScript File object. Don't forget to replace 'data:image/png;base64,...' with your Base64 string:

function dataURLtoFile(dataurl, filename = 'file') {
  var arr = dataurl.split(','),
  mime = arr[0].match(/:(.*?);/)[1],
  bstr = atob(arr[1]), 
  n = bstr.length, 
  u8arr = new Uint8Array(n);

  while(n--){
    u8arr[n] = bstr.charCodeAt(n);
  }
  
  return new File([u8arr], filename, {type: mime});
}

var base64String = 'data:image/png;base64,...'; // Your piano keys go here 🎹
var file = dataURLtoFile(base64String, 'image.png');

Ta-da! file is now a JavaScript File object.

Handling Different Types of URLs

You can pass in any data URL to the dataURLtoFile function. It accepts dataURLs, blobURLs, and httpURLs too. Just make sure you're playing the right notes. 🎵

From URL to JavaScript File Object

So, you have a URL (it could be a blobURL, dataURL or httpURL) and you would love to convert it to a JavaScript File object. No problem, JavaScript got you covered!

async function urlToFile(url, filename, mimeType) {
  const res = await fetch(url); // Go fetch! 🐶
  const buf = await res.arrayBuffer(); // buffer...buffer...buffer... 🐠

  return new File([buf], filename, {type: mimeType});
}

The function above allows you to convert a URL to a File object. As simple as A-B-C, 1-2-3, do-re-mi! 🎼

Safe and Sound Conversion

Before you dive right in, always validate the Base64 data URL before processing it. It's like checking the road before crossing, safety first. 🚦 Also, in Node.js environment, for decoding Base64 string, use Buffer like this Buffer.from(base64, 'base64') instead of atob(). It's like a superhero safe house for your data protection. 🦸

Going Async

Consider using async/await with the fetch API. It makes your code look neat and manage promises like a boss. It's the JavaScript version of a neat freak. 🧹

Advanced Standards for Conversion

Let's turbocharge the conversion process with some advanced techniques to make sure your code runs smoothly:

Remember to specify a file name and file type whenever you're creating a new File object.
You might want to use the base64-arraybuffer library for encoding and decoding, only if you want to play it like James Bond. 🕴️
To decode large Base64 strings, consider using methods that don't block the UI thread, like using the Buffer or even streaming on the server side.

Upgrading your Conversion Process

For a robust solution, add the following enhancements to your conversion function:

Error Handling: Include a way to catch and handle any errors by using try/catch blocks. Errors are like villains, they always show up uninvited. 🦹‍♂️
Optimization: Improve the performance by reducing the memory consumption of your application. It's like dieting for your app, less is more. 🥦