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
On this page of the site you can watch the video online How to upload images to Cloudinary using react-dropzone with a duration of hours minute second in good quality, which was uploaded by the user Mafia Codes 09 December 2021, share the link with friends and acquaintances, this video has already been watched 7,485 times on youtube and it was liked by 187 viewers. Enjoy your viewing!
