Building Custom Image Uploader With React

Опубликовано: 17 Октябрь 2024
на канале: tapaScript by Tapas Adhikary

4,051

105

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:
https://github.com/atapas/youtube/tre...

Links Mentioned:
A template repository to start projects with React and TailwindCSS scaffolded by Vite: https://github.com/atapas/vite-tailwi...
How To Create A Reusable Template Repo:    • React, Vite, TailwindCSS: Configure T...
Learn about useRef in detail:    • 10 - What is the useRef hook in React...
Upload File API: https://fakeapi.platzi.com/en/rest/fi...

🤝 My Links:
Blog: https://blog.greenroots.info/

Follow on X(Twitter):   / tapasadhikary

Connect on LinkedIn:   / tapasadhikary

Follow My Work on GitHub: https://github.com/atapas

Follow on Facebook:   / tapasadhi

👋 Like my work? Thank You. You can support/sponsor me from here:

Sponsor Me: https://github.com/sponsors/atapas
Sponsor my Blog: https://blog.greenroots.info/sponsor
https://mercury.streamelements.com/ti...

About Me:
Tapas Adhikary is an Educator at tapaScript, Tech enthusiast, Writer, YouTuber, 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 https://tapasadhikary.com.

#reactjs
#reactproject
#react
#reactjsdeveloper
#reactjstutorial
#reactjsprojects