Adding directory from multi-file input

[jwarshack]

Hello. I am trying to upload a directory to IPFS from a user input. I know that you can upload local directories but how do you do it from the browser.

Here is my code:

function App() {

  async function handleFile(e) {
    const files = e.target.files

    for await (const file of client.addAll(files)) {
        console.log(file.path)
    }

  }
  return (
    <div className="App">
        <input type="file" webkitdirectory directory multiple accept="audio/*" onChange={handleFile}/>            
    </div>
  );
}

This adds the files to IPFS and returns the cid for each individual file. I want to wrap all files in a directory and return the cid of the directory.

[welcome[bot]]

Thank you for submitting your first issue to this repository! A maintainer will be here shortly to triage and review. In the meantime, please double-check that you have provided all the necessary information to make this process easy! Any information that can help save additional round trips is useful! We currently aim to give initial feedback within two business days. If this does not happen, feel free to leave a comment. Please keep an eye on how this issue will be labeled, as labels give an overview of priorities, assignments and additional actions requested by the maintainers:

• "Priority" labels will show how urgent this is for the team.
• "Status" labels will show if this is ready to be worked on, blocked, or in progress.
• "Need" labels will indicate if additional input or analysis is required.

Finally, remember to use https://discuss.ipfs.io if you just need general support.

[amandesai01]

Hey @jwarshack, When you select a folder using input type file, it creates an iterable of file blobs and passes in reference. You are using addAll function. All it does is takes in an iterable of files and adds all files to IPFS and return's their IDs. Which is exactly what happened in you case.

If you want to store all data together, there are two ways.

1. You can zip it and then send to IPFS and while receiving back to client, unzip it and use.
2. Use Mutable File System (MFS). There, you can make directories and stuff.

I hope this helps.

[SgtPooki]

js-ipfs is being deprecated in favor of Helia. You can https://github.com/ipfs/js-ipfs/issues/4336 and read the migration guide.

Please feel to reopen with any comments by 2023-06-02. We will do a final pass on reopened issues afterward (see https://github.com/ipfs/js-ipfs/issues/4336).

This functionality should be possible in Helia with https://www.npmjs.com/package/@helia/unixfs