White square when uploaded images file to ipfs

Moralis General
#1

Hi, I am building an react app with Moralis. So far so good except 1 thing. I want the user to be able to upload a image to ipfs however, when I call the function

Web3Api.storage.uploadFolder();

It works correctly but the link I get for image redirect me to a small white square.
I understand that the issue comes from the content I choose to put for my image following a pattern lke this

const options = {
    abi: [
      {
        path: "moralis/logo.jpg",
        content:      "iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3",
      },
    ],
  };

To get the content I do the following

const readFile = async (elem) => {
    const data = elem.target.files[0]
    const file = new Moralis.File(data.name, data);
}

file gives me a ParseFile object.

const options = {
    abi: [
      {
        path: "moralis/logo.jpg",
        content: file,
      },
    ],
  };

But it seems like moralis ipfs cannot interpret it and return me a blank square when I visit the link of my freshly uploaded image.
I am really not sure what to do here? I suppose I need to transform my image into some base64 array? Is there a way to do this with moralis?

#2

Try to use data instead of file there

#3

Hi, thanks for fast reply. I tried it before using data it does not work it gives me the same little white square.
Capture d’écran 2022-04-08 à 19.00.37

#4

What is is that data? If you display it with console.log how it looks like?

#5

It is something like this

File:

lastModified: 1648630219734
lastModifiedDate: Wed Mar 30 2022 10:50:19 GMT+0200 (heure d’été d’Europe centrale) {}
name: "bird.png"
size: 79567
type: "image/png"
webkitRelativePath: ""
[[Prototype]]: File
#6

you need to get to the contents of the file in base64 format

#7

that’s what I thought, is there a way to do this easily in react or moralis?

#8

I thought that this does that automatically

#9

Nope, it just get the input.
Seems like doing this get me base64:


  const convertToBase64 = (file) => {
    return new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = () => {
        resolve(fileReader.result);
      };
      fileReader.onerror = (error) => {
        reject(error);
      };
    });
  };
  const readFile = async (elem) => {
    const file = elem.target.files[0];
    const res = await convertToBase64(file)
    console.log(res);
    setImgData(res);
}

and it works now when I upload my image to ipfs
Thanks

1 Like