How can we simply upload folder in reactjs?

Question

I am looking here for upload folder in reactjs.I have folder in that doc and docx files are there I just want to upload folder when user click in browse button.where I have to not allowed user for selecting single file. Can someone please give me simple example of folder upload or folder select where user can only select folder not file. Actually I am looking in react-dropzone library but not understanding how can I use this for folder select or upload. If someone can guide me or give me simple example where it showing folder upload example that will be great help.Thanks in Advance.

Answer 1

You can allow folder upload by adding these attributes empty "webkitdirectory directory" into your react-dropzone input.

like this. <input {...getInputProps()} directory="" webkitdirectory="" type="file" />

by using this user can't select a single file.

its work for me :)

Answer 2

You can allow folder upload by adding theses attributes "webkitdirectory mozdirectory directory" to your input :

 <input type="file" webkitdirectory mozdirectory directory />

but you can't disable the user ability to upload only one file.

Answer 3

Based on Zaif's answer, you can customize a file upload event via the getFilesFromEvent prop, as described in the react-dropzone documentation.

UPDATE: This is a semplified example taken from the official documentation.

import React from 'react'
import { useDropzone } from 'react-dropzone'

function Plugin(props) {
  const {acceptedFiles, getRootProps, getInputProps} = useDropzone({
    getFilesFromEvent: event => myCustomFileGetter(event)
  })
  return (
    <section className="container">
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
    </section>
  )
}

export default Plugin

async function myCustomFileGetter(event) {
  const files = []
  // Retrieves the files loaded by the drag event or the select event
  const fileList = event.dataTransfer ? event.dataTransfer.files : event.target.files

  for (var i = 0; i < fileList.length; i++) {
    const file = fileList.item(i)
    files.push(file)
  }

  // files returned from this function will be acceptedFiles
  return files
}

Answer 4

If you're looking for uploading a folder using d&d I recommend react-uploady:

Its drop-zone supports file and folder drop upload out of the box. It can even be used to upload child folders recursively:

 
import Uploady from "@rpldy/uploady";
import UploadDropZone from "@rpldy/upload-drop-zone";

const MyApp = () => (
    <Uploady destination={{ url: "my-server.com/upload" }}>
        <UploadDropZone 
          onDragOverClassName="drag-over"
          htmlDirContentParams={{ recursive: true }}
        >
            <span>Drag&Drop File(s) or Folder(s) Here</span>            
        </UploadDropZone>
    </Uploady>
);

Answer 5

This worked for me on a real react APP. This is done almost with pure JS code

// 0. import useRef
import { useRef, etc} from 'react';


// 1. declare your ref 
const directoryRef = useRef<HTMLInputElement>(null);

useEffect(() => {
    if (directoryRef.current !== null) {
        // 2. set attribute as JS does
        directoryRef.current.setAttribute("directory", "");
        directoryRef.current.setAttribute("webkitdirectory", "");
    }
// 3. monitor change of your ref with useEffect
}, [directoryRef]);

// 4. in your HTML input file reference the ref you declared in point 1, "ref={directoryRef}"
<input hidden
accept="image/jpeg"
multiple
type="file"
ref={directoryRef}
onChange={(e) => { handleFileChange(e.currentTarget.files); }}
/>