Drag and dropping files in React using react-dropzone

This video will use the react-dropzone library to allow users to drag and drop files, see previews, and upload files to Cloudinary.

👉🏼 The Ultimate NextJs course

👉🏼 Project source code

👉🏼 react-dropzone library

CHAPTERS

0:00 Intro
0:38 Project setup
1:00 Adding react-dropzone
6:00 File preview
11:00 Preventing memory leaks
12:30 Restricting file size or type
15:00 Handling rejected files
20:15 Uploading files to Cloudinary
25:35 Outro

[mariocesena]

Hamed, huge thanks for the awesome tutorials! You didn't just whip up a useful component, but you also broke it down and threw in some great tips. Keep the cool stuff coming our way!

[raminkhodaie]

very usefull content for me, I was looking for something like this.TNX a lot Hamed

[ZawCodes]

exactly what I was looking for, very helpful

[NazaninSoleimanian]

huge thanks for the awesome tutorials!

[dancelifevarsha]

Thank you very much sir. This video saved my day.

[ahrenwagner]

This is honestly one of the greatest things on the internet.

You teach very well. Thanks so much, I was trying to do something exactly like this and couldn't find anything until this.

[mayanksaxena]

Thanks for amazing lesson! I have a question - I am unable to access the preview property in Files object in the JSX. The error that I am getting is "Property 'preview' does not exist on type 'File' " Have done the exact same approach that you have mentioned in the video. just that my project supports react typescript.

[beccaowens]

Thank you, Hamed. Is there a way to set a minimum image width and height?

[Kiswood]

Hi, what if I wanted to save these files to a local database (i.e., a folder on my desktop) would that be possible? I wanted to use this to for an MVP I'm creating:

- Drag and drop files, save to local folder (mock database) using React Dropzone
- Run a python code that goes into that folder and executes code

[aryansrivastava]

Hey man real thanks for this insightful video about react dropzone and cloudinary. I have a question can we upload multiple files at the same time using cloudinary

[mikeoxlong]

For some reason it tells me "Unexpected end of input" at res.json, my syntax seems to be correct though

[wheeiraeth]

Hi thanks for the tutorial! I am also using this method of having a separate state for the selected files so as to allow removal of files and selecting files one by one. However I have one issue - when I use the maxFiles property, this property is tied to the acceptedFiles from react-dropzone, which means that if my maxFiles = 3, and I select one by one, I can still end up selecting more than 3, because acceptedFiles "refreshes" each time we select a file. Do you have a solution for this? Thanks again!

[AbdelaliBennadji]

After the Droping of pictures, how can i save them until the work finish, without a database pls

[jritzeku]

What if we need to get all the urls for multiple images? Atm, we upload multiple images to cloudinary but only get back one url for a single image. Ideally, would like to have array of image urls which then can be sent to backend api to store in some DB. I've tried to store image urls via state after getting back data but when i access it, the state array is not yet populated with the urls.

[mojtabaakhlaghi]

Hi
could you say me the font name that you are using in your vs code please

[DEVil-kfwj]

hey i wanted upload audio instead of images what major changes i have to make?

[angelicoctahedron]

It doesn't show not-allowed cursor when dragging non-image. What can we do with that?

[nkolofl]

i'm working on a project where users can purcase a mobile case before the order they have to edit the mobile back case, like they want (Adding the image, editing, rotating, resizing and adding the text) and once the editing is over they may save the image at that i have to store it in the backend using express, For the User interface im using the React, is there any NPM package to do that ??? I'm stuck in this for a week not able to figure it

[santiago]

how can i do this for google cloud services since its json?

[shyamksukumaran]

How can I get the actual File Type from in react-dropzone. Currently Type is extracted based on file extension however if I rename a file sample.pdf to sample.pdf.jpg, it will return type as Image/JPEG not as application/pdf.