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

[@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🙏

[@viktorvaughn5669]

Worked, thank you! Spent all day yesterday trying to troubleshoot this.

[@colbyfayock]

🙌

[@PickleRiiiiiiick]

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

[@colbyfayock]

appreciate the kind words!

[@jennysukut4346]

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

[@colbyfayock]

glad to hear it helped! 🙌

[@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

[@andinuruljihad2912]

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

[@colbyfayock]

thank you!

[@yourlinuxguy]

Amazing tutorial, Thankyou so much.

[@colbyfayock]

thanks and no problem!

[@leonardozerino9628]

Great video my dude, thank you so much.

[@colbyfayock]

no problem!

[@amosfigueira894]

Excellent. Thanks for Sharing.

[@colbyfayock]

no problem!

[@yosimamo8475]

is the preview will work fine with pdfs? or any other except to png/jpeg files?

[@colbyfayock]

PDFs need a special kind of viewer to preview them in the browser, it won't "just work" like an image. therea re some packages that allow you to convert a pdf to an image that you can utilize as the preview but thats an extra step: www.npmjs.com/package/pdf-to-img it also depends on the format as not all image formats are supported in the browsers, for instance .heic you need to convert to a different format: www.npmjs.com/package/heic2any i should note that if you're using something like Cloudinary like i showed in the video, you can easily grab an image from a PDF by simply changing the format, but of course thats post-upload

[@peapuffer3514]

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

[@colbyfayock]

thank you!

[@techcoderuz]

thanks. Great tutorial

[@colbyfayock]

🙌

[@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

[@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

[@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?

[@DMKomori]

Hopefully you already found the fix, but the error is because the actual type for `acceptedFiles` is `Array`, not the `FileList` shown in the video.

[@raminkhodaie4063]

very insightful video

[@colbyfayock]

glad it was helpful!

[@DMKomori]

This was a great tutorial, just what I needed! Would you consider updating your pinned comment to encourage people to check out your source code in the description since there are a couple discrepancies between it and the video?

[@colbyfayock]

is there something wrong in the video? or just pointing out that there are differences?

[@DMKomori]

@@colbyfayock I don't know if you'd consider the type at 10:42 wrong (it's `Array` in the source code instead of `FileList` from the video), but there was that and needing to satisfy TS by using `{preview as string}` in the element introduced at 8:52. Not big things, but my IDE wasn't very happy until I swapped what was in the video with the source code, lol

[@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

[@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

[@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

[@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

[@DMC888]

You could just drop that second handler function, you can get the file object from the first form handler. async function handleOnSubmit(e: React.SyntheticEvent) { e.preventDefault(); const form = e.target as HTMLFormElement; const imageInput = form.elements.namedItem("image") as HTMLInputElement; const fileObject = imageInput.files[0] ................

[@colbyfayock]

ah i thought i remembered that being unreliable but maybe i was missing something when poking around, thanks for the tip!

[@blank.haruka]

Thank you sm!

[@colbyfayock]

no problem!

[@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

[@davidsehi7109]

Thanks man

[@colbyfayock]

No problem!

[@abderrahmaneelfilali5933]

suuper helpful

[@colbyfayock]

🙌