How to upload images to Cloudinary using react-dropzone
In this video we will be seeing that how to we use #react-dropzone to upload files to our #Nodejs #Express server and then how to upload them to #Cloudinary. Later we will also see that how do we delete images from Cloudinary. There is a bonus inside video as to how to handle promises inside a foreach loop.
--------------------------------------------------------------------------
📦FREE $100 credit @Digital Ocean: https://m.do.co/c/3208f08b3324
--------------------------------------------------------------------------
Subscribe: https://www.youtube.com/c/yourstruly2...
--------------------------------------------------------------------------
💵Support the channel:
Paypal: https://www.paypal.me/trulymittal
Patreon: / trulymittal
--------------------------------------------------------------------------
⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. I've been using Kite for 6 months and I love it! https://www.kite.com/get-kite/?utm_me...
--------------------------------------------------------------------------
React-Dropzone: https://react-dropzone.js.org/
Cloudinary: https://cloudinary.com/
Cloudinary SDK: https://www.npmjs.com/package/cloudinary
Express Draft: https://www.npmjs.com/package/express...
00:00 Preview
00:38 Introduction
01:09 frontend React
3:36 Styling Dropzone
5:56 useDropzone Hook
7:58 getInputProps and getRootProps
10:46 handling file Drops
11:34 acceptedFiles and rejectedFiles
15:19 accepting file types
18:15 keeping track of selected or dropped files
20:56 why upload base64
21:49 Converting File to Base64
23:51 displaying images to be uploaded
26:30 TASK: removing images to be uploaded
26:59 upload button
28:07 Backend express application using express-draft
31:30 upload route
32:17 Cloudinary configuration
39:57 Uploading single image
44:05 Uploading Multiple files
50:23 Deleting images
======================
✔ Other useful Playlists
======================
RestAPI (NodeJS and MongoDB): • REST API using NodeJS and MongoDB
API Authentication using #JWT: • NodeJS API Authentication (JWT's)
Firebase: • Firebase | Build a Notes App
Docker: • Docker
MongoDB: • Learn MongoDB in 50 minutes (Crash Co...
Html/Css/Js: • HTML / CSS / JS
Android: • Android
Challenges: • Challenges
#yoursTRULY #tutorial #howto
Watch video How to upload images to Cloudinary using react-dropzone online without registration, duration hours minute second in high quality. This video was added by user Mafia Codes 09 December 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 7,485 once and liked it 187 people.