Taking an image and converting it into BLOB for MySQL-CodePudding

I am trying to make a JavaScript that would take an image file and covert it into BLOB (by converting the file into Base64 first and then into BLOB), my project doesn't have a support for toBlob() so I have found different convering steps and put them together and they work to a point where I have to pass the BLOB from the function where its made out for the Mysql part of code that takes care of communicating with the database. (I have that fully working). Now I only need to find a way how to connect them through a variable that saves the results of the imageforQuery function.

My code so far is this:


  let base64String = "";

  function imageforQuery(imageid) {
          //takes file and converts to Base64
          var file = document.getElementById(imageid).files[0];

          var reader = new FileReader();
          console.log("next");
          imgFileFrontBlob = "";
          reader.onload = function () {
              base64String = reader.result.replace("data:", "")
                  .replace(/^. ,/, "");

              // console.log(base64String);
              base64String = 'data:image/jpeg;base64,'  base64String;
              console.log(base64String);
              //converts Base64 into BLOB
              var binary = atob(base64String.split(',')[1]);
              console.log(binary);
              var array = [];
              for(var i = 0; i < binary.length; i  ) {
                  array.push(binary.charCodeAt(i));
              }
              var imgFileFrontBlob = new Blob([new Uint8Array(array)], {type: 'image/png'});

              console.log(imgFileFrontBlob);
              return imgFileFrontBlob

          }

          reader.readAsDataURL(file);


       };

by experimenting with console.log() at different stages and return I have found out that I can't pass the converted BLOB result out, as the function imageforQuery() only returns what is after reader.readAsDataURL(file); and I don't know of a way of getting that result out.

CodePudding user response：

Base64 is simply ascii text. So MySQL's datatype BLOB or TEXT would work. That is, after converting to Base64, don't worry about "convert to blob"; it is not necessary.

That is, you can probably replace the code from //converts ... through return ... by simply

return base64String;

CodePudding user response：

You can wrap the FileReader instance and calls inside of a Promise. Return the Promise immediately. In the reader.onload function call resolve() to exit the Promise with a value.

function imageforQuery(imageid) {
  return new Promise(resolve => {
    var file = document.getElementById(imageid).files[0];
    var reader = new FileReader();
  
    reader.onload = function () {
      let base64String = reader.result.replace("data:", "").replace(/^. ,/, "");
      base64String = "data:image/jpeg;base64,"   base64String;

      var binary = atob(base64String.split(",")[1]);
      var array = [];
      for (var i = 0; i < binary.length; i  ) {
        array.push(binary.charCodeAt(i));
      }

      var imgFileFrontBlob = new Blob([new Uint8Array(array)], {
        type: "image/png",
      });
  
      resolve(imgFileFrontBlob);
    };

    reader.readAsDataURL(file);
  });
}

This results in being able to use your function like here below. imageforQuery is called, returns a Promise. When the promise is finished (meaning resolve is called) the function in the then method will run.

imageforQuery(imageId).then(imgFileFrontBlob => {
  // Use your blob here.
  saveToDB(imgFileFrontBlob); // Example of how you would use it.
});

Or use it with async / await.

(async () => {
  const imgFileFrontBlob = await imageforQuery(imageId);
  saveToDB(imgFileFrontBlob); // Example of how you would use it.
})()