React File Upload Tutorial with Drag-n-Drop and ProgressBar

In order to validate our forms, we will use both react-dropzone and Yup with Formik validationSchema.

In order to add a nice look and feel to our multi upload form, we will use Material-UI Progress component.

We will also use Formik with typescript during this video.

--- URLs

---- Timeline:
00:00 Introduction
01:11 How react-dropzone works
08:54 Start the single file upload with progress bar
11:15 Limitations of Vercel, netlify, aws lambda and heroku file system
13:03 Fetch doesn't give us progress, so we will use XMLHttpRequest
14:11 Code the uploadFile function
18:59 How cloudinary works
23:45 Add progress bar to our upload component
25:34 Add a File Header with name and delete button to our upload progress bar
31:00 Handle onDelete file event
33:42 Update the file wrapper with the URL (file location) received from cloudinary
37:35 Connect the upload files with formik
40:23 Error component to show the red progress bar on validation errors
48:53 Add file size validation using react-dropzone
49:22 Display validation errors from react-dropzone
54:43 Add formik validations to only submit the form when we have a URL

----
Follow me on:

[lazee_farm]

I can't believe I found someone who not only uses the same front end stack I do, but uploads super useful videos and explains them with so much clarity. This channel is a gem. Thanks so much

[saisagarsharma]

Came here to like the video. will use the knowledge some other time when needed. ;)

[pcintra]

Bruno, your explanation was fantastic, very comprehensive and complete! Thank you for sharing!

[MardekSirenen]

Wow great video!
But if I download the source code and open it in VS code I get error messages that the material ui packages/elements cannot be found....
What do I have to do to fix this?

[cagrakar]

You touch the crucial parts of daily works of me as a front-end developer, in your every single videos. I'm learning so much from you Bruno, thank you.

[mhonjesterjohncalingo]

Your explanation is so easy to understand. I'm so glad that I watched this video, I learned a lot from it. Thank you so much.

[ayyoubkasmi]

Amazing video! This was indeed really helpful. Appreciate it!

PS: I really laughed at those special 17 seconds where the computer froze XD, used to happen to me sometimes when sharing my screen in an online meeting haha

[Programandoenc]

Hi Bruno! Thank you for this! When deleting an uploaded file, dont you need to also delete the file from the cloudinary cloud ?

[smarttechinfo]

Sir, i have a question . If anyone change the extension and upload it to the server. In that case how to validate that file before uploading... Eg. Suppose I have a file virus .zip, now I change it to virus.png and upload it to the server.. then how to protect the server from this kind of hoax image through validation...

[blyatMail]

sorry bruno.. i wanna ask.. can you explain part of 34:54
why the promise need to declare as string?

I'm new typescript and react..

[johntenorio]

Thanks so much for the tutorial. I have a question and hope that somebody could help me. Why do my dropzone uploaded files disappear when I change pages with a multiStep?

[adarshrathi]

bro, are you made multi form step. I want to make website clone of zety resume builder in which use multi step form.

[genie]

"I will zoom this for you.." - Thank you Bruno! :)

[knnethtan]

Thanks, how do I search the filename such as image and previes on web? These files is store at network drive, or D drive folder?

[dhruvpahwa]

How can I display already existing files from server and upload new files and update the existing files?

[HolmesPatrick]

Great video - you are a good teacher, you may consider putting a preview of the image, and delete deletes the preview before upload - and also a feature to delete the picture in cloudinary - that would be good - how to put picture in separate folder in cloudinary it is going to root top level?

[apoffys]

Great video, thanks! I'm getting a linter complaint I don't quite understand though, could you explain it?

It's in
useEffect(() => {
async function upload() {
const url = await uploadFile(file, setProgress);
onUpload(file, url);
}

upload();
}, []);

I get this warning:
"React Hook useEffect has missing dependencies: 'file' and 'onUpload'. Either include them or remove the dependency array."
Adding them to the array like ESlint wants just makes the upload continue in an endless loop. It works if I leave them out.

[jesper]

Hey, Thanks for the tutorial. I have everything setup and working on localhost but when I deploy to prod I get this error: Type error: Cannot find module 'react-dropzone' or its corresponding type declarations. Do you know why?

[hamedkhoshaman]

hi bro, how to upload csv file in table?please

[ryanoshea]

Anyone tried integrating this into React Final Form?