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.

––––––––––––––ADDITIONAL PROBLEMS I HAVE ENCOUNTERED––––––––––––––

okay so thanks to Emiel Zuurbier (Thank you!) I have managed to rewrite my code with the help of his solution. However as much as it helped one part of the problem, it didn't help with the JavaScript `Blob object` as we found out it is not the exact same thing as SQL `BLOB`.

Now the problem is that upon trying to send the `Blob object` in a SQL query, this resulted in just sending pure text "[Blob object]".

But I am using JavaScript successfully to pull the data from a BLOB field from my database and convert it into `Base64` images from that data that was stored in the `BLOB` in a different part of my application. The code for that is below:

```
var converterEngine = function (input) { 
   // fn BLOB => Binary => Base64 ?
   var uInt8Array = new Uint8Array(input),
      i = uInt8Array.length;
   var biStr = []; //new Array(I);
   while (i--) { biStr[i] = String.fromCharCode(uInt8Array[i]);  }
   var base64 = window.btoa(biStr.join(''));
   return base64;
};

```

What I need to do is just reverse this and in theory, it should get me the same data that I receive from the database.
My reversal code is below:

```
// this is the inside bit of code from the first problem that is solved and the 
// typeOfData variable is parsed into the function in imageforQuery() as a second input 
// variable (in other words its not to be of concern)
reader.onload = function () {
          let base64String = reader.result.replace("data:", "").replace(/^.+,/, "");
          base64String = "data:" + typeOfData + ";base64," + base64String;

          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 ourArray = new Uint8Array(array);

          resolve(ourArray);
        };

```

However, as I mentioned the data that comes out (`ourArray`) isn't actually identical to the original file from the BLOB in the database so my code doesn't function correctly and I don't know why. Any ideas where I've made a mistake?