React Dropzone drag and drop files and upload to firebase full course

In this project, we are going to create a simple web app, which include the dropzone and input, which allow the user to enter text and drag and drop multiple files to the dropzone. It will then upload to the storage, for example in this project, we will allow the users to upload the images file, if the user put other type file, it will not allow, and the border of the dropzone will turn red.

👨‍💻 Source code: https://www.youtube.com/channel/UCu4-4FnutvSHVo9WHvq80Ww/join https://ckmobile.gumroad.com/l/react-dropzone-drag-and-drop-files-and-upload-to-firebase https://www.udemy.com/course/react-dropzone-drag-and-drop-files-and-upload-to-firebase/?referralCode=11608F1212CE58AF7235

📚Read articles: https://ckmobile.medium.com/react-dropzone-upload-multiple-images-to-firebase-storage-all-articles-761a4a7489e3

00:00 Create project with nextjs and add dropzone component 02:26 Install react dropzone packages 03:35 Handle the dropped file 07:05 Setup the firebase firestore and storage 08:22 Connect Next.js app to firebase 11:11 Post the text to firestore 14:43 Upload the images array to the firebase firestore 18:58 Install TailwindCSS and add Posts component 21:33 Render the posts 25:21 Render images and timestamp 30:09 Styling the dropzone 32:45 Styling the input field and button

📩 You can also subscribe or follow to get info or our (free) course coupons https://app.gumroad.com/ckmobile https://mailchi.mp/cb8cb6b3878e/javascript-course

📲 Follow Us: Gumroad courses:https://app.gumroad.com/ckmobile Udemy courses: https://www.udemy.com/user/cyruschan2/ Linkedin: https://www.linkedin.com/company/ckmobi/ Telegram: https://t.me/ckmobi Twitter: https://twitter.com/ckmobilejavasc1 Instagram: https://www.instagram.com/ckmobile8050/ Quora: https://www.quora.com/profile/Ckmobile Pinterest: https://www.pinterest.com/ckmobile8050 ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ 🔥Complete Courses🔥 ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Gumroad Web and mobile complete courses https://app.gumroad.com/ckmobile

Complete CSS course https://www.udemy.com/course/draft/4112256/?referralCode=D70F3923FF6501A398AA

React native Expo for multiplatform mobile app development https://www.udemy.com/course/react-native-expo-for-multiplatform-ios-android-mobile-app-development/?referralCode=2FA276AA4E55CE5A2A39

Complete NodeJS course with express, socket io and MongoDB https://www.udemy.com/course/create-nodejs-app-with-express-socket-io-and-mongodb/?referralCode=4B0B97AD4B1908DD6588 Complete Progress Web App BootCamp https://www.udemy.com/course/complete-progressive-web-app-bootcamp/?referralCode=E04DAFEDCE920AB6EA55

Complete Modern JavaScript BootCamp from the beginning https://www.udemy.com/course/complete-modern-javascript-with-firebase-bootcamp-for-beginners/?referralCode=6AF7AA3DB6AD6B880D66

React - The Complete Guide with React Hook Redux 2020 in 4hr https://www.udemy.com/course/complete-react-course-w-hooks-react-router-redux-usecontext/?referralCode=B192869617ADE079536F

Vue JS and Firebase:Build an iOS and Android chat app [2020] https://www.udemy.com/course/vuejs-and-firebase-build-an-ios-and-android-chat-app/?referralCode=D959334D3BC5DB1FDF53

New SAT Math Course https://www.udemy.com/course/new-sat-math-complete-course/?referralCode=4E1A982C127EA13EB3D8

New SAT Math Practice Test Explain https://www.udemy.com/course/new-sat-maths-explain/?referralCode=ABD0C235875F55CB6F5F

Get A* in GCSE Maths (Quadratic equations and graph) https://www.udemy.com/course/get-a-in-gcse-maths-quadratic-equations-and-graph/?referralCode=2E4D7672FE3571F59DF8

ckmobile aims to provide quality tutorials like reactjs, nextjs, firebase, javascript, nodejs, mongodb, expo reactnative. Learn it easily and create professional website and apps.

#javascript #webdevelopement #reactjs #firebase #mongodb #nodejs ... https://www.youtube.com/watch?v=oEL1UW5B3yk