How to programatically trigger file dialog with folder upload? #1318
Replies: 2 comments
-
Okay so I figured out how to do it by following the advice here #1157 and disabling the FS access API. I then used the |
Beta Was this translation helpful? Give feedback.
0 replies
-
Hey @jolim24601 If you have two buttons serving specific purposes, we can probably add another import { useState, useCallback, useRef } from 'react'
import { useDropzone } from 'react-dropzone'
import './App.css'
function App() {
const onDrop = useCallback(acceptedFiles => {
// Do something with the files
console.log(acceptedFiles);
}, [])
const { getRootProps, getInputProps, isDragActive, open } = useDropzone({ onDrop, noClick: true })
const folderInputRef = useRef(null);
return (
<div {...getRootProps()} className='border-2 rounded p-4 m-8'>
<input {...getInputProps()} />
<input {...getInputProps({ webkitdirectory: "true" })} ref={folderInputRef} />
<div className='mb-2'>{
isDragActive ?
<p>Drop the files here ...</p> :
<p>Drag 'n' drop some files here, or click to select files</p>
}</div>
<button onClick={() => { open() }} className='mr-2 bg-blue-200 border-blue-300 rounded py-0.5 px-2'>Upload</button>
or
<button onClick={() => { folderInputRef.current?.click() }} className='ml-2 bg-blue-200 border-blue-300 rounded py-0.5 px-2'>Upload Folder</button>
</div>
)
}
export default App |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hello,
I'm trying to implement a feature where a user can select one of two buttons to either upload by file or upload by folder. However I'm having trouble figuring out how I can implement this using react-dropzone as it seems to only support folder upload by dnd. Has anyone figured out a way to do this programatically?
Beta Was this translation helpful? Give feedback.
All reactions