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
Auf dieser Seite können Sie das Online-Video How to upload images to Cloudinary using react-dropzone mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Mafia Codes 09 Dezember 2021 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 7,485 Mal angesehen und es wurde von 187 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
