Revision history [back]

To convert a Data URI to a file and then add it to FormData in JavaScript, you can follow these steps:

1. Parse the Data URI to get the file name, content type, and the actual data. You can use the following code for this:

   function parseDataURI(dataURI) {
    const matches = dataURI.match(/^data:(.+);base64,(.*)$/);
    const file = {
      name: "data-uri-file",
      type: matches[1],
      data: matches[2],
    };
    return file;
   }
   

2. Convert the data to a Blob object using the atob() function to decode the base64-encoded data, and create a new Blob object from the decoded data. You can use the following code for this:

   function dataURIToBlob(dataURI) {
    const byteString = atob(dataURI.split(",")[1]);
    const mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];
    const ab = new ArrayBuffer(byteString.length);
    const ia = new Uint8Array(ab);
    for (let i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], { type: mimeString });
   }
   

3. Create a new FormData object, append the converted file, and then use it to make an AJAX request. You can use the following code for this:

   const dataURI = "data:image/png;base64,iVBORw0KG...";
   const file = parseDataURI(dataURI);
   const blob = dataURIToBlob(dataURI);
   const formData = new FormData();
   formData.append("file", blob, file.name);
   
   const xhr = new XMLHttpRequest();
   xhr.open("POST", "/upload", true);
   xhr.onload = function () {
    if (xhr.status === 200) {
      console.log("File uploaded successfully.");
    } else {
      console.log("Error uploading file.");
    }
   };
   xhr.send(formData);
   

This code will convert the Data URI to a file and then add it to FormData, which can then be sent to the server using an AJAX request.