A drag and drop file component for React.
Details here: https://github.com/react-dropzone/react-dropzone/
Questions tagged [react-dropzone]
290 questions
21
votes
3 answers
How to use dropzone in a single file mode?
I am using react-hooks with dropzone.
So, my code looks something like this:
const onDrop = (acceptedFiles) => {
console.log(acceptedFiles);
};
const { getRootProps, getInputProps } = useDropzone({ onDrop });
return (
Vishal
- 6,238
- 10
- 82
- 158
17
votes
4 answers
How to test react-dropzone with Jest and react-testing-library?
I want to test onDrop method from react-dropzone library in React component. I am using Jest, React Testing Library. I'm creating mock file and I'm trying to drop this files in input, but in console.log files are still equal to an empty array. Do…
Evgeniy Valyaev
- 433
- 1
- 3
- 14
17
votes
3 answers
Uploading multiple files with Fetch and FormData APIs
I'm trying to use the native Fetch and FormData APIs to upload multiple files at once to the server but I can't for the life of me get it to work. Here's what I've got:
// acceptedFiles are File objects coming from `react-dropzone`.
function…
Maros
- 1,825
- 4
- 25
- 56
15
votes
4 answers
How to remove file from react-dropzone?
Hope you help me with this, I'm using the useDropzone hook from react-dropzone and I don't know how to make a remove file button for each file.
How can I remove a single file?
This is my code:
function DragFile(props) {
const { acceptedFiles,…
HenaoJesus
- 151
- 1
- 1
- 6
14
votes
1 answer
How to make Previews in react-dropzone work with files other than images?
I need help with how to make the react-dropzone NPM package in making uploaded files show a preview on files other than Image files (*.png, *.jpg/jpeg, *.gif, etc. — those all generate a preview just fine).
Currently, when I use Dropzone for…
faddah
- 317
- 1
- 3
- 9
13
votes
4 answers
How to test properly React Dropzone onDrop method
I'm testing React Dropzone and I need to check the onDrop function. This function has two parameters (acceptedFiles and rejectedFiles). I'm mocking the files like this:
let image = {
name: 'cat.jpg',
size: 1000,
type: 'image/jpeg'
};
Then in…
Albert Olivé Corbella
- 4,061
- 7
- 48
- 66
11
votes
2 answers
Best way to store file objects in React Redux store (files upload from DropZone?)
I am currently using Material Ui dropzone to upload multiple files. just wondering what is the best way to add/update files in the redux store. I am currently doing a dispatch action when "onChange" triggers which return all the files on the…
dev0864
- 465
- 2
- 7
- 17
11
votes
2 answers
In React, how to pass a dynamic variable to a const CSS Style list?
I'm using react-dropzone to allow a user to upload a profile photo.
I define the custom CSS like so:
const dropzoneStyle = {
width: `200px`,
height: `200px`,
backgroundColor: `#1DA1F2`,
};
Inside the method to render the DropZone input, I…
AnApprentice
- 108,152
- 195
- 629
- 1,012
10
votes
5 answers
How can we simply upload folder in reactjs?
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…
Nammu
- 171
- 1
- 2
- 9
9
votes
4 answers
How to use react-dropzone with react-hook-form?
How to use react-dropzone with react-hook-form so that the form returns proper file - not just file name?
Avani Bataviya
- 750
- 1
- 6
- 20
9
votes
1 answer
DropZone: How to Accept .csv Files?
I've read quite a few answers on SO about this, and most advise using the acceptedFiles property to specify the accepted mime types.
However, the DropZone docs say:
Mime type determination is not reliable across platforms. CSV files,
for example,…
VikR
- 4,818
- 8
- 51
- 96
9
votes
3 answers
react-dropzone opens files chooser twice
I an encountering an issue with react-dropzone for quite a long time.
First, let's jump straight to the problem with a video: https://drive.google.com/open?id=1UmWtHbQ9U0LBHxYtZ1YSoXrfsezwH-os
The file choser window opens twice on every file inputs…
Emmanuel Scarabin
- 705
- 2
- 9
- 24
7
votes
1 answer
Uploading files in react by react-dropzone and formik
I have two components, first is Formik form:
{
console.log(values)}}>
{props => (
7
votes
1 answer
How can I read file content with react-dropzone?
I'm trying to learn more about working with files for an upcoming project. Is there a way with react-dropzone that I can run a function when onDrop happens to change the contents of the files I'm uploading? For example, if I'm uploading a word doc…
chubbymaus
- 119
- 1
- 1
- 6
6
votes
0 answers
Uploading large files from the front-end
I am trying to understand what is the best method in which large files can be uploaded to a server from the front-end. For the front-end, I make use of a library called react-dropzone which allows me to get information on file that I that I intend…
ppak10
- 2,103
- 3
- 13
- 24