A drag and drop file component for React.
Details here: https://github.com/react-dropzone/react-dropzone/
Questions tagged [react-dropzone]
290 questions
5
votes
2 answers
How to get upload progress for multiple files? (React + React-dropzone + Axios + onUploadProgress)
I'm trying to create a multi-upload drag and drop with React and react-dropzone. Everything works great, except that I can't seem to get the progress information for the uploads even though I'm using onUploadProgress with Axios.
Here's the code I'm…
gglasses
- 826
- 11
- 30
5
votes
2 answers
How to add a file and its description to the state using dropzone in ReactJs?
How can I add to the state of a component one or more files and their description, using a select, using react-dropzone.
I am using Reactjs, dropzone and bootstrap and what I want to achieve is: add one or more files (by dragging them to an area)…
Dfor
- 338
- 1
- 3
- 15
5
votes
1 answer
How do I make a material ui dropzone area not allow duplicates?
I'm using https://yuvaleros.github.io/material-ui-dropzone/ and I'm trying to make it so that it doesn't allow uploading duplicates of previously uploaded files.
I've tried on onchange function that removes the file from the if…
Sheshank S.
- 3,053
- 3
- 19
- 39
5
votes
0 answers
react-dropzone-uploader how to display already uploaded files from a react state
I am currently using RDU(react-dropzone-uploader) to upload files to the server, I am saving the uploaded files in a react state. I am trying to figure out how to display the already uploaded files as part of the preview on the dropzone from the…
dev0864
- 465
- 2
- 7
- 17
5
votes
2 answers
restrict image dimension in react-dropzone
I am using react-dropzone for image upload. Everything is working fine. Validation for image size is also working fine. But I could not check the dimension for image. I want to validate the image's width and height to enforce user to upload the…
Serenity
- 3,884
- 6
- 44
- 87
5
votes
1 answer
How to use Async Await in "onDrop" of "react-dropzone" ? (Parsing error: Can not use keyword 'await' outside an Async function)
I'm using "react-dropzone" for dropping files :
import React from "react";
import { useDropzone } from "react-dropzone";
const DropzoneUpload = ({ onDrop, accept }) => {
// Initializing useDropzone hooks with options
const { getRootProps,…
JAN
- 21,236
- 66
- 181
- 318
5
votes
0 answers
react-dropzone: populate field with image already uploaded to server
I have a form that allows the user to upload several images to a server. This form also allows the user to edit the form as well depending upon qs parameters. As additional information, I am using redux-saga with react, just to provide more…
user1790300
- 2,143
- 10
- 54
- 123
5
votes
0 answers
React Dropzone not able to accept certain file types
In my create-react-app, App.js, I have these file types, which is always rejected.
xls - application/x-msi
pptm - application/vnd.openxmlformats-officedocument.presentationml.presentation
pptx -…
kenpeter
- 7,404
- 14
- 64
- 95
5
votes
1 answer
How to call axios on submit button in react-dropzone?
How can I call the axios when the user clicks the submit button?
Unable to add an onclick event handler on the submit button, where shall I declare the onClick event function which calls axios or accepts acceptedFiles variable in this…
Amiya Behera
- 2,210
- 19
- 32
5
votes
4 answers
Getting react-dropzone to accept *all* files
I have inherited a code base that is React.JS on the front-end and Node.JS/Express.JS on the back-end on an AWS EC2 instance server. The code I have usese react-dropzone (https://react-dropzone.js.org/) and was made to just take drag&drops of image…
faddah
- 317
- 1
- 3
- 9
5
votes
1 answer
React Dropzone issue : children is not a function
I've installed react dropzone in a react app. When adding the component dropzone, the app crashes, claiming that:
TypeError: children is not a function
Dropzone.render
node_modules/react-dropzone/dist/es/index.js:478
475 | var isMultipleAllowed =…
DoneDeal
- 149
- 2
- 3
- 11
5
votes
3 answers
"Uncaught TypeError: Cannot read property 'type' of undefined" and unclear what it is related to
I originally thought this was an issue with react-redux, axios, lodash, and/or react-dropzone; however, files are uploading fine, but this error still triggers. (Even though it is says "failed" in console, the files are being posted to the…
cjones
- 8,384
- 17
- 81
- 175
5
votes
2 answers
In React-dropzone, how to tell the user the file's maxSize is too big?
I am using the following to allow a user to upload a profile photo with react-dropzone:
const FILE_FIELD_NAME = 'files';
const renderDropzoneInput = (field) => {
const files = field.input.value;
let dropzoneRef;
return (
…
AnApprentice
- 108,152
- 195
- 629
- 1,012
4
votes
2 answers
React-Dropzone, accepted files MIME type error
I´m currently building a react drop zone for obvious reason, but am getting those weird errors:
Skipped "accepted" because it is not a valid MIME type. Check https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types…
user18472307
4
votes
1 answer
Access 'name' property on React Dropzone component
I'm looking to create multiple dropzones in the same component with React Dropzone and I want to handle a file from each dropzone differently. This will be part of a form with many different dropzones that each have different parameters. To start, I…
7evam
- 145
- 3
- 14