In this video we upload images directly to Cloudinary straight from the browser in React using Drag & Drop courtesy of react-dropzone. We'll cover both unsigned and signed approaches by utilizing Next.js' API pages to hide our secrets.
---------- Links
react-dropzone - https://react-dropzone.js.org/
cloudinary-react - https://github.com/cloudinary/cloudinary-react
Creating Signature: https://cloudinary.com/documentation/upload_images#signed_upload_video_tutorial
Starter Code: https://github.com/leighhalliday/react-cloudinary-example/tree/89467a6dcac7f5b66d6af21bc4ffd8cfa18a9177
Completed Code: https://github.com/leighhalliday/react-cloudinary-example
---------- Sponsor
Special thanks to KwesForms for partnering with me on this video! The most revolutionary form service for web agencies. Head on over to https://kwes.io and for a limited time use the code LEIGH50 to receive a 50% discount on any annual plan for one year.
---------- Connect
Join this channel - https://www.youtube.com/channel/UCWPY8W-FAZ2HdDiJp2RC_sQ/join
Join me on Discord - https://discord.gg/wcSNwfu
---------- Timeline
00:00 - Introduction
00:38 - KwesForms
01:45 - Adding react-dropzone
06:40 - Uploading Images to Cloudinary
12:40 - Displaying Images from Cloudinary
17:35 - Creating Signature
21:05 - Uploading to Cloudinary with Signature
