'how to upload a folder in reactjs

I need an input that uploads a directory with the folders in it. I tried this:

<input
    ref={wrapperRef}
    id="file-upload"
    name="file-upload"
    type="file"
    // multiple
    directory=""
    webkitdirectory=""
    className="absolute inset-0 z-20 w-full  pt-0 m-0 outline-none opacity-0 cursor-pointer"
    onDragOver={onDragOver}
    onDragLeave={onDragLeave}
    onDrop={onDrop}
    onChange={(e) => handelOnChange(e)}
/>

But, when I choose the directory for upload only files in the directory are selected. but I need the base directory structure to not change.

htmlreactjsnext.js


Solution 1:[1]

Maybe consider uploading a .rar archive. You can do whatever you like with it on the server side. The directory upload feature is not available in all browsers.

If you really want to use this method, you can. The uploaded file object has a webkitRelativePath property available. You can easily figure out its folder after some string manipulation.

const input = document.getElementById("input")

input.onchange = (e) => {
  for (const file of e.target.files) {
    console.log(file.webkitRelativePath)
  }
}
<input type="file" id='input' webkitdirectory mozdirectory />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 TeraWattHour

Related Questions