The Last React File Input You'll Ever Need

Let's look at a really neat React file input with an image preview, and upload status bar. It looks good, works well, and is part of a free & open-source project I'm currently building. Let me know your thoughts in the comments - anything you'd want to improve?

-----

0:00 - Intro
0:13 - Showcase
2:05 - The Code

The stuff I use to make my videos
thats pretty much it. Those are affiliate links so I might earn a commission if you purchase after clicking them. :^)

[joshtriedcoding]

Any ideas on how to display the alt text in there after it’s been generated? Still trying to figure out how to make that look good 🥸

[lexsemenenko]

If you make a video on how to actually upload files to S3 and Cloudinary as part 2, this will be insanely useful for many of us. Please vote. Maybe Josh could record that!

Great video the man!

[yarapolana]

Whatever I search I find that you already created a video about it. Amazing stuff! So proud of your progress.

[raymondmichael]

I had to come back to this;
Can we upload pdf files with this?
If yes, I wonder how it’ll handle the preview 😊

And if not; how to make it work😢

[xPanda]

could you do a detailed video about useReducer

[Kimitri]

I'm having some trouble with it, I'm currently developing a upload very similar to it, but instead automatically drag and drop files to upload, I just upload when click on button, the problem is when I chose a lot of images like 30 or 100, the browser almost broke because of the number of thumbnail that it needs to show, how can I fix it? Because I really need to be able to choose a lot of images

[subhambharadwaz]

Perfect timing. I was looking for a way to implement this! Thank you brother 🔥

[RainKullamaa]

how long does those presigned images work. can you use this method and apply to a blog site. Or those images get blocked after some time ?

[MarkusNode]

Great video - thank you!
Can you also please show - how I need to design a nextjs 14 component - to automatically upload the entire contents of a windows directory to Cloudinary and automatically tag all images via AI?

[alwaysgrowww]

Hi bro, learned a lot in your videos. If u make a video like aws implementation in nextjs app, production ready nextjs app like chat app created in the recent video. Very much impressed with the button variant code. that looked like a professional coding. share professional code techniques like variants in your upcoming videos.

[abhishekdhoundiyal]

hey Josh nice video thanks for this info, but does this work on mobile browser specially safari?

[nwaguchima]

This is beautiful. It's amazing how you build, you literally put things together in an amazing way. Thank you for your lovely content every time. Is this part of a building project you'll be putting up the video soon?