How to Upload files from a folder under a wrapping directory CID using ipfs-http-client and nextJs

[user120]

The code below represents a function that allows users to upload a single file through my Next.js web app by clicking on the upload button. Everything is working so well. However, I recently wanted to implement the possibility of adding several files within a wrapping directory/url. I found this article [Upload files from a folder under a wrapping directory CID using ipfs-http-client and nodejs] but it didn’t help much, as I don’t have enough experience with Node.js and encountered several errors. Can you please assist me in implementing the function to add multiple files using ‘addAll’ within the ‘handleFileChange(e)’ function below? Thanks!!

async function handleFileChange(e) {
const file = e.target.files[0]
try {
const added = await client.add(
file,
{
progress: (prog) => console.log(received: ${prog})
}

  )
  console.log(added.path);
  const url = `https://myprivatename.infura-ipfs.io/ipfs/${added.path}` 
  console.log(url);
  setFileUrl(url);
} catch(e) {
  console.log(e)
} 

}

[Flaveeu]

Hi @user120 ,

To achieve this, you’ll need to modify the function to handle multiple files and use the ‘ipfs-http-client’ library to upload them to IPFS.

Here’s the updated code:

// Import the required libraries
import { create } from 'ipfs-http-client';

// Initialize IPFS client
const client = create({ host: 'ipfs.infura.io', port: 5001, protocol: 'https' });

// Function to handle file change
async function handleFileChange(e) {
  const files = e.target.files;
  
  try {
    // Array to store the paths of added files
    const addedPaths = [];
    
    for (const file of files) {
      const added = await client.add(file, {
        progress: (prog) => console.log(`Received: ${prog}`)
      });

      // Store the added file's path in the array
      addedPaths.push(added.path);
    }

    console.log('Added paths:', addedPaths);

    // If you want to display only the last file's URL, you can use:
    // const url = `https://myprivatename.infura-ipfs.io/ipfs/${addedPaths[addedPaths.length - 1]}`;

    // If you want to display all the uploaded files' URLs, you can use:
    const urls = addedPaths.map((path) => `https://myprivatename.infura-ipfs.io/ipfs/${path}`);
    console.log('File URLs:', urls);
    
    // Set the file URLs in your state (assuming you're using React's state)
    setFileUrls(urls);
  } catch (e) {
    console.log(e);
  }
}

In this updated code, we’ve made the following changes:

1. Instead of a single file, we now receive multiple files in the ‘handleFileChange’ function.
2. We use a loop to iterate through all the files and use the ‘client.add’ method to upload them to IPFS.
3. We store the paths of all added files in the ‘addedPaths’ array.
4. Depending on your requirements, you can choose to display only the URL of the last file uploaded or all the uploaded files’ URLs.

Remember to update your state management code accordingly (assuming you are using state to store the file URLs).

Make sure to install the ‘ipfs-http-client’ library if you haven’t already: