0

I am currently trying to make a simple form where user can add their username, password and image to the database (I use mySQL for the database). I store the image as a blob data type and in the react file, I first converted it to Base64 before adding it to the database.

const handleUpload = async (e) => {
  const file = e.target.files[0];
  const base64 = await convertBase64(file);
  setDataUri(base64);
  // console.log("Converted to Base64: " + base64)
}

const convertBase64 = (file) => {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    fileReader.onload = () => {
      resolve(fileReader.result);
    }
    fileReader.onerror = (error) => {
      reject(error);
    }
  })
}

And when I called the data from the database, it is in this form:

{
  ...,
  "image": {
     "data": (2074) [100, 97, 116, 97, 58, 105, ...],
     "type": "Buffer",
  }
}

So I converted the image.data to base64 before displaying it as an image.

const convertImage = (file) => {
  var convert = Buffer.from(file.data).toString('base64');
  return convert
}
...
<img src={`data:image/png;base64,${convertImage(data.image)}`} style={{height: "250px"}} />

However, I dont see any images. I need guidance for this; perhaps I converted to the wrong format, maybe I miss something along the way or is it a backend problem? Any pointers or hints are welcomed!

Edit: Forgot to state my question.

Found the way to solve it: Solution

jcqs0827
  • 1
  • 1
  • can you not use the same method you made "convertBase64" to the blob? – Kouta Nakano Jul 08 '21 at 03:03
  • I wanna make sure if I read your question correctly. Right now, file is saved as blob in SQL. base64 conversion is used to display the image on frontend. Is that correct? – Kouta Nakano Jul 08 '21 at 03:05
  • @KoutaNakano hello sorry for late reply, yes I saved it as blob and display it as base64. I refer to this post; [Link](https://stackoverflow.com/questions/63007518/how-to-convert-blob-from-mysql-to-base64). I save my file as blob as I read from this article [Link](https://www.thecreativedev.com/how-to-store-a-file-in-database/#:~:text=There%20are%20two%20ways%20to%20save%20images.%20Most,database%20information%20is%20undoubtedly%20a%20very%20good%20choice.). – jcqs0827 Jul 08 '21 at 03:37
  • then can you not use the same method convertBase64 for the blob you fetch from database? – Kouta Nakano Jul 08 '21 at 03:48
  • @KoutaNakano sorry I just realized that I havent state my problem yet. So I did try to do that but it says that the data I called from my database isnt a blob. I try to use my current code it works but the image isnt showing at all. – jcqs0827 Jul 08 '21 at 04:24
  • did you see the differences between two blobs? The blob you convert to base64 before saving v.s. the blob saved in SQL – Kouta Nakano Jul 08 '21 at 05:21
  • @KoutaNakano hi yes I did, the one after converting to base64 is in this format: "data:image/png;base64,iVBORw0KG..." while the one that I called from the db is in an array form. – jcqs0827 Jul 08 '21 at 06:02
  • you are not comparing two blobs. The first one you mention is base64 string. What's the blob like before converting to base64? – Kouta Nakano Jul 08 '21 at 09:17
  • @KoutaNakano the blob that I retrieve from the database? or the one after I upload? The one after I upload and before converted to base64: "File {name: "japfa.png", lastModified: 1624260584253, lastModifiedDate: Mon Jun 21 2021 14:29:44 .. }". The one I retrieve from DB is the one on my post in array form. – jcqs0827 Jul 09 '21 at 01:10
  • Yes. And I asked for the difference. If the blob has a different structure, read the documentation about blob type in the database you are using. The documentation must say something about how they save blob type. – Kouta Nakano Jul 09 '21 at 05:06

0 Answers0