React File Upload Tutorial with Drag-n-Drop and ProgressBar
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.
--- URLs
GitHub URL: https://github.com/bmvantunes/youtube...
Deployed Demo: https://youtube-2021-feb-multiple-fil...
Formik Tutorial Video: • Formik: React Forms Tutorial with Yup...
Formik Tutorial Playlist: • Formik Tutorial
React.js Tutorial Playlist: • React.js Tutorial with Hooks and Type...
React-Dropzone: https://react-dropzone.js.org/
computableLength: https://developer.mozilla.org/en-US/d...
XMLHttpRequest: https://developer.mozilla.org/en-US/d...
Cloudinary Docs: https://cloudinary.com/documentation/...
---- 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:
Twitter: / bmvantunes
Dev.to: https://dev.to/bmvantunes
Website: https://brunoantunes.net
GitHub: https://github.com/bmvantunes
LinkedIn: / bmvantunes
Watch video React File Upload Tutorial with Drag-n-Drop and ProgressBar online without registration, duration hours minute second in high quality. This video was added by user Bruno Antunes 23 February 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 58,855 once and liked it 1.1 thousand people.