Learn to build a custom image uploader with React in this step-by-step coding video. You learn both client and server-side image uploading with examples.
Learning theory is great, but you need to practice. This is why a small but meaningful project can help you understand the concepts pretty well. I hope this video helps you and you like it.
Why waiting? Let's GO 🚀
Please LIKE/SHARE/SUBSCRIBE to the channel to show your support. Thanks! 🫶
Timecodes
0:00 - What Are We Building?
01:30 - Complete the Uploader Structure
09:08 - Handling File Type Inputs
12:02 - Placing the Edit Icon
14:18 - Customizing Uploader With Reference
18:01 - Handling File Change Event
19:10 - Preview of Uploaded Image
21:09 - Multi-part Image Upload to Server
27:05 - Handling Loading State in File Upload
28:38 - The Final Outcome
29:28 - A Task For You!
30:07 - The End Note
Join tapaScript Discord Server
- / discord
Source Code Used in this Video:
- github.com/atapas/youtube/tre...
Links Mentioned:
- A template repository to start projects with React and TailwindCSS scaffolded by Vite: github.com/atapas/vite-tailwi...
- How To Create A Reusable Template Repo: • React, Vite, TailwindC...
- Learn about useRef in detail: • 10 - What is the useRe...
- Upload File API: fakeapi.platzi.com/en/rest/fi...
🤝 My Links:
- Blog: blog.greenroots.info/
- Follow on X(Twitter): / tapasadhikary
- Connect on LinkedIn: / tapasadhikary
- Follow My Work on GitHub: github.com/atapas
- Follow on Facebook: / tapasadhi
👋 Like my work? Thank You. You can support/sponsor me from here:
- Sponsor Me: github.com/sponsors/atapas
- Sponsor my Blog: blog.greenroots.info/sponsor
- mercury.streamelements.com/ti...
About Me:
Tapas Adhikary is an Educator at tapaScript, Tech enthusiast, Writer, KZitemr, and Open Source projects maintainer/contributor. He is a full-stack developer who has vast experience in building SaaS solutions. He is the founder of the ReactPlay platform, which is driven by open-source projects and a fast-growing community.
You can find more about him at tapasadhikary.com.
#reactjs
#reactproject
#react
#reactjsdeveloper
#reactjstutorial
#reactjsprojects
Негізгі бет Building Custom Image Uploader With React
Пікірлер: 15