Upload Files in React - Typescript, Drag and Drop, & Form Examples

Learn how to upload files like images from a form with drag and drop in a React app.
We'll walk through setting up an HTML filepicker input to select files, read the files and show a preview using the Filereader API, uploading them to services like Cloudinary, configuring the file input to accept only certain types, and seeing how we can easily add drag and drop with React Dropzone.
Dig deeper into Full Stack React with my upcoming Appwrite course: spacejelly.dev...
🧰 Resources
Tutorial: spacejelly.dev...
Starter: github.com/col...
Code: github.com/col...
Demo: my-react-file-...
react-dropzone...
📺 RUclips: ruclips.net/user/co...
🐦 Twitter: / colbyfayock
📹 Twitch: / colbyfayock
✉️ Newsletter: www.colbyfayoc...
🎥 What I Use: www.colbyfayoc...
#colbyfayock #reactjs #uploadfile #draganddrop #webdevelopment

[@colbyfayock]

Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course

[@tastymuffinmm]

Super helpful tutorial, straight to the point and good examples. Subscribed and looking forward to more!

[@colbyfayock]

thank you!! 🙌

[@Brlitzkreig]

Wow, you're an excellent teacher you explain it so concisely

[@colbyfayock]

thank you🙏

[@jennysukut4346]

Fantastic! What a helpful + concise tutorial. Thanks for sharing!

[@colbyfayock]

glad to hear it helped! 🙌

[@PickleRiiiiiiick]

Your tutorials are always solid and getting better. Thank you sir.

[@colbyfayock]

appreciate the kind words!

[@amosfigueira894]

Excellent. Thanks for Sharing.

[@colbyfayock]

no problem!

[@shooting4star2023]

I believe that it's slightly better to use ref to hold the file, instead of state. As the selected file doesn't affect the look of the page and a rerender (checking on the V-DOM to be technically accurate) is not necessary with the state.

[@colbyfayock]

would you imagine then that the file would be stored in a ref but then a reference to the file would be stored in state? the existence of the file does impact the look of the page as we display the preview so we need a mechanism to be able to hook into the render lifecycle

[@andinuruljihad2912]

great tutorial. i will watch your youtube career with great interest.

[@colbyfayock]

thank you!

[@peapuffer3514]

What's up buddy.😊 Watching your video after a while. Keep it up

[@colbyfayock]

thank you!

[@techcoderuz]

thanks. Great tutorial

[@colbyfayock]

🙌

[@vikashmishra7160]

@8:55 src={preview} was showing error .. how did you resolve it?

[@colbyfayock]

added src={preview as string} github.com/colbyfayock/my-react-file-upload/blob/main/src/pages/contact.tsx#L90

[@yourlinuxguy]

Amazing tutorial, Thankyou so much.

[@colbyfayock]

thanks and no problem!

[@crypto1886]

Hey dude great video, I am a newbie in react and javascript and am running into an error in this line of code:
const { acceptedFiles, getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
Error:
Type '(acceptedFiles: FileList) => void' is not assignable to type '(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void'.
Types of parameters 'acceptedFiles' and 'acceptedFiles' are incompatible.
Property 'item' is missing in type 'T[]' but required in type 'FileList'.ts(2322)
lib.dom.d.ts(8330, 5): 'item' is declared here.
Any clue how to fix this?

[@colbyfayock]

hey have you seen my code for how i set it up? github.com/colbyfayock/my-react-file-upload/blob/main/src/pages/contact.tsx
i just spun it up and dont see any errors with that, perhaps its an issue with how you have onDrop set up, where i see FileList, are you using FileList instead of Array perhaps?

[@John-eq5cd]

Another clear and useful video, thanks!
A couple of questions, though...
Do we need our Cloudinary api_key to upload assets? I can successfully do this using the Cloudinary url and referencing my cloud name in the url, nothing else needed.
Secondly, by using NEXT_PUBLIC_ in front of your environment variable as you suggest below, is this not exposing that env variable?

[@colbyfayock]

you need the API key unless you're doing an unsigned upload which is defined using an Upload Presset
yup, that exposes it to the client, but the API Key is okay for this use, you do _not_ want to expose the API Secret

[@leonardozerino9628]

Great video my dude, thank you so much.

[@colbyfayock]

no problem!

[@andelianzio7457]

And what if a I wanna upload the image + data (name, email, message)

[@colbyfayock]

typically you'll store that kind of data in a database. some databases come with file storage that you could also use in situations like that, but often they dont which leaves you to need a service like Cloudinary or S3, where you would then store the ID / URL in the database alongside the rest

[@raminkhodaie4063]

very insightful video

[@colbyfayock]

glad it was helpful!

[@OzzTheWizzard]

can you make a video showing how to do this one by one, step by step from scratch?

[@salijoghli]

Bro he literally did that

[@OzzTheWizzard]

@@salijoghli let me rewatch it and comment again

[@PelleWidell]

Very good video. But what if I want to paste a snippet from memory?

[@colbyfayock]

hey thanks! good question, did a quick lookup and this codepen seems to work, check the web console upon paste: codepen.io/appsoftware/pen/WNwWpzW
this would make for a good tutorial! will add it to my list

[@blank.haruka]

Thank you sm!

[@colbyfayock]

no problem!

[@ruairidhgrass3479]

Thanks man, how did you get an environment variable in a client component? It's giving me an error,

[@colbyfayock]

no problem! you prepend VITE_ if youre using React with Vite to make it public: github.com/colbyfayock/my-react-file-upload/blob/main/src/pages/contact.tsx#L42

[@ruairidhgrass3479]

@@colbyfayock thanks for the quick reply man, sorry I should have specified. I’m using nextjs on my project

[@colbyfayock]

@@ruairidhgrass3479np, similarly you'd want to add NEXT_PUBLIC_ in front of your environment variable then

[@davidsehi7109]

Thanks man

[@colbyfayock]

No problem!

[@shreyaishere6783]

If we want a pdf or doc file instead of image?

[@colbyfayock]

have you tried? it should work the same as long as you're not restricting the filetype

[@abderrahmaneelfilali5933]

suuper helpful

[@colbyfayock]

🙌