[SOLVED] Parse Server - Web3Api.storage.uploadFolder for different file types like word, excel, images

Moralis General
#1

Hi Team,

I have users upload any document on UI (like word, excel, image…etc), code is working fine to upload but the content is not coming up. How to pass the content for these different type of formats?

Please note that these files will be password protected by the users. It worked well on Moralis server, I am trying to achieve same on the self host parse server.

Please advice. Thank you

    const data = fileInput.files[0];
    const options = {
      abi: [
        {
          path: data.name,
          content: data,
        },
      ],
    };
    const path = await Web3Api.storage.uploadFolder(options);
    console.log(path);
#2

what happens in this case with uploadFolder?

I think that the content type is based on the content of the file that is uploaded

do you have an example that doesn’t work as expected with upload folder?
(you also have to take care to upload in binary and not in text)

#3

Just trying to upload a word document supporting.docx which has one line text and here is the IPFS Url
https://ipfs.moralis.io:2053/ipfs/QmQTX7aknKyyZ3XupJ6zrnxs6d1C6cubD82V3EHKre1LVf/Supporting.docx

https://ipfs.moralis.io:2053/ipfs/QmR1efct7yGKXHA8NMP7coaekDmbhC3viBmcS3wdJFi3aE/Migration.xlsx

(you also have to take care to upload in binary and not in text
Do you have reference for this, please? I am using the code posted above.

#4

you also have an example of same files that were uploaded with a server and work as expected?

#5

first file seems to be a json:

{"__type":"File","name":"Supporting.docx"}

same for the second one:

{"__type":"File","name":"Migration.xlsx"}

this is what that code uploaded? you have to upload the contents of the file

maybe you can add some logging to see what you are uploading?

#6

No but just using saveIPFS() I was able to upload any type of document when was on Moralis server

#7

The code used was below:

    const data = fileInput.files[0];
    const file = new Moralis.File(data.name, data);
    console.log(Moralis.User.current())
    console.log(file)
    const options = {
      abi: [
        {
          path: data.name,
          content: file,
        },
      ],
    };
    const path = await Web3Api.storage.uploadFolder(options);
    console.log(path);
    console.log(path[0].path);
#8

here you have to provide the content of the file encoded in base64

#9

Hello, tried with below code to convert content into base64 but nothing seems to work. File is uploaded but when opening either the format error (for .docx or .xls files) or like in simple .doc the file opens with weird data. Please help. Thank you.

https://ipfs.moralis.io:2053/ipfs/QmYiPSFdXr6EN8RyzzuqgY7AEGsHjfMEtYicozrsoG9wCs/Supporting.docx

https://ipfs.moralis.io:2053/ipfs/QmXRnhQzXZrjWKPi2BGd9qVnagMzzveNnVf4uaB1YToz5s/Supporting2.doc

New function created

const toBase64 = file => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });```

Upload function now
```const uploadPDocIPFS = async () => {
    const fileInput = document.getElementById("file");
    const data = fileInput.files[0];
    const content = await toBase64(data)
    console.log(await toBase64(data));
    const options = {
      abi: [
        {
          path: data.name,
          content: content.data,
        },
      ],
    };
    const path = await Web3Api.storage.uploadFolder(options);
    setValues({ ...values, message: path[0].path });
  };
#10

Try to add some logging to see what you are uploading

#11

Try with these changed lines in your uploadPDocIPFS function:

const content = (await toBase64(data)).split(',')[1];

const options = {
      abi: [
        {
          path: data.name,
          content: content,
        },
      ],
    };
1 Like
#12

Thank you so much, works like a charm.
Even tried with password protected files and it uploads and retrieves correctly.

2 Likes