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.

🧰 Resources

#colbyfayock #reactjs #uploadfile #draganddrop #webdevelopment

[tastymuffinmm]

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

[Brlitzkreig]

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

[jennysukut]

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

[PickleRiiiiiiick]

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

[andinuruljihad]

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

[peapuffer]

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

[shootingstar]

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.

[leonardozerino]

Great video my dude, thank you so much.

[vikashmishra]

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

[John-eqcd]

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?

[yosimamo]

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

[crypto]

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 '<T extends File>(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?

[DMC]

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 = as HTMLInputElement;
const fileObject = imageInput.files[0]

[OzzTheWizzard]

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

[andelianzio]

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

[PelleWidell]

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

[shreyaishere]

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

[ruairidhgrass]

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