React File Upload Tutorial with Drag-n-Drop and ProgressBar
57.4 هزار بار بازدید -
3 سال پیش
-
In this tutorial, we'll build
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: Twitter: bmvantunes
Dev.to: https://dev.to/bmvantunes
Website: https://brunoantunes.net
GitHub: https://github.com/bmvantunes
LinkedIn: LinkedIn: bmvantunes
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: Twitter: bmvantunes
Dev.to: https://dev.to/bmvantunes
Website: https://brunoantunes.net
GitHub: https://github.com/bmvantunes
LinkedIn: LinkedIn: bmvantunes
3 سال پیش
در تاریخ 1399/12/05 منتشر شده
است.
57,462
بـار بازدید شده