Questions tagged [react-dropzone]
The react-dropzone tag has no usage guidance, but it has a tag wiki.
react-dropzone
294
questions
0
votes
0
answers
26
views
react-dropzone onDrop is not triggered programmatically when using unaccepted file type
I'm using react-dropzone in my React project, and I have it set up to only accept .stl and .zip files. Currently I'm testing other file types to ensure that an error is shown when the user uploads an ...
- 2,415
0
votes
0
answers
24
views
"Accept" giving headaches in React Dropzone
Error thrown in terminal:
Argument of type '{ accept: { 'image/png': string[]; 'text/html': string[]; }; maxFiles: number; onDrop: (acceptedFiles: T[]) => void; }' is not assignable to parameter of ...
0
votes
0
answers
42
views
react-dropzone does not load document in mobile browser
Recently, I finished a project where I used react-dropzone. Uploading files works fine on desktop browsers, but on mobile browsers, the files don't load.
Btw, it's only accepted PDF files
That is the ...
0
votes
1
answer
301
views
Is there a way to validate react dropzone files using zod schema react react hook form
am using shadcn Form that uses react hook form, zod for validation and react dropzone together to validate my input before i submit a form.
below is the schema am using and how am mounting the ...
- 61
0
votes
0
answers
25
views
When using the flags multiple or maxFiles, the react-dropzone onDrop call back does not return any files in the acceptedFiles array
I am using the onDrop callback which expects acceptedFiles, that I can then use to append the images to a form.
What I have noticed is that when I use the maxFiles flag with a number bigger than the ...
- 1
0
votes
0
answers
60
views
I am taking audio file from dropzone component and uploading it into firebase storage [duplicate]
But it is storing in 9 bytes always in app/octet-stream format. It is the code
interface FileWithPreview extends File {
path: string;
preview: string;
}
const AudioDropzone = ({
className,
...
0
votes
1
answer
83
views
Why the file doesn't upload?
This code defines a modal component (CategorieModal) in React for adding or editing a category. It uses react-dropzone for file uploads and includes inputs for the category title and cover image. When ...
0
votes
0
answers
19
views
React Dropzone prevent Internet Shortcut Files from showing up
I'm using react-dropzone for file uploads. Currently the only file type I'm accepting is .stl files, but when I click on the file upload box, the file explorer still shows Internet Shortcut files.
...
- 2,415
0
votes
0
answers
42
views
react-dropzone , isDragReject not working when file exceeds max size
using react-dropzone,I added ,maxSize: 1048576, when i drag a file the exceed this size
isDragReject is false even that the file is rejected. how can i over come it ?
I tried to use onDragEnter and ...
- 43
0
votes
1
answer
37
views
React-dropzone: make only part of the text clickable
I'm using react-dropzone for uploading stl files to my website and I'm stuck on how to make only part of the text clickable. For this example, I want "STL files" to be blue and when clicked ...
- 2,415
0
votes
0
answers
16
views
React: Prevent Layout Shift in Dropzone When Previewing Uploaded Images
I'm working on a React project where I'm using a drag-and-drop area to upload images. I'm facing a layout issue: when images are uploaded and previewed, the entire dropzone area shifts or resizes, ...
- 1
0
votes
1
answer
180
views
How to exclude .jfif extension from image/jpeg type in accept of react-dropzone
I have used:
accept = { "image/jpeg": [".jpg", ".jpeg"], "image/png": [] },
but I'm having trouble with the .jfif file format, it's interpreted as .jpeg and it'...
- 11
1
vote
1
answer
202
views
How to integrate react-dropzone with useFormState?
I'm building a form using useFormState from the react-dom library. One of its fields involves a file input I implemented with react-dropzone. My current code is:
Form
export default function Form() {
...
1
vote
0
answers
174
views
uploading files in nextjs13 using react-dropzone and possible multer
This has been giving me a lot of headache: In my FileUploader component, I am facing this issue.
import React, { useState } from 'react';
import { Accept, useDropzone } from 'react-dropzone';
...
- 435
0
votes
0
answers
71
views
Testing Library / React Dropzone basic test failure
For some reason, my Jest mock is not being invoked. All relevant bits of logic are indeed being accessed/invoked and, in fact, if I pass a handler of my own--something like () => { console.log('...
- 1,393