Getting an error while adding file to web3Storage

Help
,
1

Hey guys, I am getting an error while uploading files on web3Storage. here’s the error:-Error uploading file: Error: missing input file(s). And code is mentioned below.

async function storeDriveFiles(){
        console.log(document.getElementById("input").files[0]);
        var fileInput = document.getElementById("input");
        const rootCid = await client.put(fileInput.files[0]);
        console.log(rootCid);
    
        const res = await client.get(rootCid);
        const files = await res.files();
        const url = URL.createObjectURL(files[0]);
        setFile(url);

    }
 
    const fileEvent = async(e) => {
     
            const data = e.target.files;
            try {
            if (
            data[0].type == "application/pdf" ||
            data[0].type == "application/json" ||
            data[0].type == "image/png" ||
            data[0].type == "image/jpg" ||
            data[0].type == "image/jpeg" ||
            data[0].type == "text/plain" ||
            data[0].type == "text/csv"
            ) {
            await storeDriveFiles(data[0]);
            } else {
            console.log("Please upload pdf, json, txt, csv, png, jpg or jpeg!");
            }
            } catch (error) {
            console.log("Error uploading file: ", error);
            }
            
        }

Thank you.
2

Hey @Mahima and welcome to the IPFS forum,

Can you share more information about the output you are getting from the line:

        console.log(document.getElementById("input").files[0]);

Can you share a link to a repository link you can share?

Also I saw you also opened Uncaught (in promise) Error: missing input file(s) - Error while uploading the file using web3Storage - #3 by Mahima. Please avoid creating multiple threads for the same problem.

1 Like
3

Sure, I’ll take care of it. Thanks for letting me know.

Screenshot from 2022-07-16 16-16-11
Screenshot from 2022-07-16 16-16-111253×152 27.1 KB

Here, I sent output of the
console.log(document.getElementById("input").files[0]);

async function fileEvent(){
        var fileInput = document.getElementById("input");
        console.log(document.getElementById("input").files[0]);

        const rootCid = await client.put(fileInput.files[0]);
        console.log(rootCid);
    
        const res = await client.get(rootCid);
        const files = await res.files();

        const url =  URL.createObjectURL(files[0]);
        console.log(url)
        setFile(url)
    }

I tried the above code as well but got the same error:- missing input file(s).

4

Hey, were you able to resolve this issue? Did you try double-checking the modules you have been importing?

5

Nope, I am not able to resolve it.

6

I’m not sure whether you are still looking for the solution, but putting the files into an array worked for me.

2 Likes
7

Hey @Mahima,

I solved this problem by downgrading my web3.storage version to 4.0.0.

    "web3.storage": "^4.0.0"

Also note that, I’m using "react": "^18.2.0".

Hope it helps.

1 Like