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.

Annapurna

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 :)

Tankage

Hi I have tried this it is working in JS but when I try to handle it in TS it gives this error "Property 'webkitdirectory' does not exist on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'" any idea how to solve it? – Prytaneum

can try const otherAtt = { directory: "", webkitdirectory: "" }; <input {...getInputProps()} {...otherAtt} /> – Boorish

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.

Gallopade

thanks for reply, Is there anyway in react-dropzone library where user can only select folder? because what you giving answer is pure javascript right!. – Annapurna

Not even javascript just html, anyway, after having a look at react-dropzone seems it has no options to restrict to only folder. But you can check before uploading files if it's a directory or not, and then upload if it's a directory or display an error message if it's not. – Gallopade

@NiI can you just give me example for this in (codesandbox.io) that will be great help. – Annapurna

Not really, but if you do i can help you. Anyway in the react-dropzone example there's a methods called "onDrop" if you're lucky maybe there's some infos in "acceptedFiles" var who can't be used for determine if it's a folder or not, if you're unlucky it's just a list of files contained in the folder(s) and in this case you'll have to build/fork your dedicated component. – Gallopade

@NiI yes there is "acceptedFiles" props which only validates for accepted files, i have used this library before for single file upload.But now i want to upload folder not single file, there is another props called "multiple" which allowed us to select multiple file but not folder i tried it but not worked for folder upload :( – Annapurna

This didn't work for me with react 16. I had to pass it like directory="" – Anderaanderea

@Annapurna have you found a solution meanwhile ? – Octal

this doesn't work on my side, still can only upload file rather than folder – Goatish

Simple demo on how to handle folder in file input : codesandbox.io/p/sandbox/javascript-forked-glssk4 , for the server-side of the solution it depends on which techno is used on your servers. Hope it helps. – Gallopade

Answer 3

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>
);

Siderosis

Answer 4

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); }}
/>

Intinction

Answer 5

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
}

Rabjohn

Could you provide a specific example of how to solve the problem of folder upload. – Channing

@Channing I updated my answer with an example. I hope it will be useful – Rabjohn