Upload Files in React - Typescript, Drag and Drop, & Form Examples
ฝัง
- เผยแพร่เมื่อ 26 ก.ค. 2023
- 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/reactappwrite
🧰 Resources
Tutorial: spacejelly.dev/posts/uploadin...
Starter: github.com/colbyfayock/demo-r...
Code: github.com/colbyfayock/my-rea...
Demo: my-react-file-upload.vercel.app/
react-dropzone.js.org/
📺 TH-cam: th-cam.com/users/colbyfayock?sub_c...
🐦 Twitter: / colbyfayock
📹 Twitch: / colbyfayock
✉️ Newsletter: www.colbyfayock.com/newsletter/
🎥 What I Use: www.colbyfayock.com/uses
#colbyfayock #reactjs #uploadfile #draganddrop #webdevelopment - วิทยาศาสตร์และเทคโนโลยี
Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course
Super helpful tutorial, straight to the point and good examples. Subscribed and looking forward to more!
thank you!! 🙌
Wow, you're an excellent teacher you explain it so concisely
thank you🙏
Your tutorials are always solid and getting better. Thank you sir.
appreciate the kind words!
Fantastic! What a helpful + concise tutorial. Thanks for sharing!
glad to hear it helped! 🙌
great tutorial. i will watch your youtube career with great interest.
thank you!
What's up buddy.😊 Watching your video after a while. Keep it up
thank you!
Amazing tutorial, Thankyou so much.
thanks and no problem!
Great video my dude, thank you so much.
no problem!
very insightful video
glad it was helpful!
thanks. Great tutorial
🙌
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.
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
Thank you sm!
no problem!
Thanks man
No problem!
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?
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
suuper helpful
🙌
Thanks man, how did you get an environment variable in a client component? It's giving me an error,
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
@@colbyfayock thanks for the quick reply man, sorry I should have specified. I’m using nextjs on my project
@@ruairidhgrass3479np, similarly you'd want to add NEXT_PUBLIC_ in front of your environment variable then
@8:55 src={preview} was showing error .. how did you resolve it?
added src={preview as string} github.com/colbyfayock/my-react-file-upload/blob/main/src/pages/contact.tsx#L90
Very good video. But what if I want to paste a snippet from memory?
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
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?
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?
can you make a video showing how to do this one by one, step by step from scratch?
Bro he literally did that
@@salijoghli let me rewatch it and comment again
If we want a pdf or doc file instead of image?
have you tried? it should work the same as long as you're not restricting the filetype
And what if a I wanna upload the image + data (name, email, message)
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