ReactJS - Is there a library for creating folder structures and downloading them

Applications Web Development
1

Hi All,

Been away a while, I’m half way through a project and have hit a hurdle, no easy options out there. Maybe I’m just not searching Google correctly.

I have a ReactJS web app and I want users to be able to create folders/directories possibly even files at some point and then be able to download them as zip files.

Could this be done with ReactJS or was I being to ambitious. PHP no problem but I’d rather attempt to do in ReactJS and NodeJS.

Any advice welcome

Zigs

2

React is a framework but all developers use other JS libs, because no framework is all encompassing.

Anyway, normally when we use JS, which is client-side code, and we want to accomplish a task on the server side, the first thing we do is write a JSON-based API on the server side to accomplish the task.

So, what you need to do is create an API which accepts a PUT request which accepts a JSON object as the instruction to your API. Your API can be written in any code you choose. it's up to you, but it runs on the server side.

Your API should also return a JSON object back to the client with the status of the API task (success, failure, etc).

You should test the API for bugs and security issues (since you are writing to the file system, you will need to secure your API with at least an API key, which is secret, for example).

Sounds pretty easy to me :slight_smile:

When you work in a web app (on the browser side) and you want to perform server-side tasks, you need to think in terms of creating APIs on the server side which accepts a JSON object via secure HTTP PUT requests, does the task on the server side, and then returns a status code as a JSON object to the client (the browser).

HTH

2 Likes
3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

4

Here is advice from ChatGPT:

Yes, it is possible to create a feature in a ReactJS web app that allows users to create folders and download them as zip files. You can use the fs module in Node.js to create directories and files on the server, and use a library like jszip to generate a zip file from the contents of the directories. You can then send the generated zip file to the client for download.

Here's some example code that demonstrates how you could create a zip file from a directory using fs and jszip:

Copy code

const fs = require('fs');
const JSZip = require('jszip');

async function createZip(source, out) {
  const zip = new JSZip();
  const root = zip.folder(path.basename(source));

  const files = await fs.promises.readdir(source);
  for (const file of files) {
    const filePath = path.join(source, file);
    const stats = await fs.promises.stat(filePath);
    if (stats.isDirectory()) {
      root.folder(file).add(await createZip(filePath), {
        base: filePath
      });
    } else {
      root.file(file, fs.createReadStream(filePath));
    }
  }

  return zip.generateAsync({ type: 'nodebuffer' });
}

createZip('path/to/directory', 'path/to/output.zip').then((data) => {
  fs.writeFileSync('path/to/output.zip', data);
});

To use this code in a ReactJS app, you will need to call the createZip function from a backend API endpoint that is called by your React app. You can then trigger the download of the zip file by sending the data as a response to the API call and setting the Content-Disposition header to attachment.

I hope this helps! Let me know if you have any questions.

I am sure we will have users in the future answering questions and replying but using ChatGPT (if not already) as their source :frowning:

1 Like