In this tutorial, we’ll build a multiple file upload with drag-n-drop and a progress bar using Next.js, React, react-dropzone, Formik and Yup for validation.

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.

---- 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

GitHub URL: https://github.com/bmvantunes/youtube…

Subscribe: https://www.youtube.com/channel/UCyU0mNYdX9EHY7rc5yucIZA

#react #javascript