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

  Рет қаралды 66,600

Colby Fayock

Colby Fayock

Күн бұрын

Пікірлер: 61
@colbyfayock
@colbyfayock 3 ай бұрын
Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course
@tastymuffinmm
@tastymuffinmm Жыл бұрын
Super helpful tutorial, straight to the point and good examples. Subscribed and looking forward to more!
@colbyfayock
@colbyfayock Жыл бұрын
thank you!! 🙌
@Brlitzkreig
@Brlitzkreig 6 ай бұрын
Wow, you're an excellent teacher you explain it so concisely
@colbyfayock
@colbyfayock 6 ай бұрын
thank you🙏
@viktorvaughn5669
@viktorvaughn5669 Ай бұрын
Worked, thank you! Spent all day yesterday trying to troubleshoot this.
@colbyfayock
@colbyfayock Ай бұрын
🙌
@PickleRiiiiiiick
@PickleRiiiiiiick Жыл бұрын
Your tutorials are always solid and getting better. Thank you sir.
@colbyfayock
@colbyfayock Жыл бұрын
appreciate the kind words!
@jennysukut4346
@jennysukut4346 3 ай бұрын
Fantastic! What a helpful + concise tutorial. Thanks for sharing!
@colbyfayock
@colbyfayock 3 ай бұрын
glad to hear it helped! 🙌
@vikashmishra7160
@vikashmishra7160 10 ай бұрын
@8:55 src={preview} was showing error .. how did you resolve it?
@colbyfayock
@colbyfayock 10 ай бұрын
added src={preview as string} github.com/colbyfayock/my-react-file-upload/blob/main/src/pages/contact.tsx#L90
@andinuruljihad2912
@andinuruljihad2912 Жыл бұрын
great tutorial. i will watch your youtube career with great interest.
@colbyfayock
@colbyfayock Жыл бұрын
thank you!
@yourlinuxguy
@yourlinuxguy 7 ай бұрын
Amazing tutorial, Thankyou so much.
@colbyfayock
@colbyfayock 7 ай бұрын
thanks and no problem!
@leonardozerino9628
@leonardozerino9628 7 ай бұрын
Great video my dude, thank you so much.
@colbyfayock
@colbyfayock 7 ай бұрын
no problem!
@amosfigueira894
@amosfigueira894 2 ай бұрын
Excellent. Thanks for Sharing.
@colbyfayock
@colbyfayock 2 ай бұрын
no problem!
@yosimamo8475
@yosimamo8475 2 ай бұрын
is the preview will work fine with pdfs? or any other except to png/jpeg files?
@colbyfayock
@colbyfayock 2 ай бұрын
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
@peapuffer3514 Жыл бұрын
What's up buddy.😊 Watching your video after a while. Keep it up
@colbyfayock
@colbyfayock Жыл бұрын
thank you!
@techcoderuz
@techcoderuz 6 ай бұрын
thanks. Great tutorial
@colbyfayock
@colbyfayock 6 ай бұрын
🙌
@John-eq5cd
@John-eq5cd 9 ай бұрын
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
@colbyfayock 9 ай бұрын
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
@shooting4star2023 3 ай бұрын
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
@colbyfayock 3 ай бұрын
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
@crypto1886 7 ай бұрын
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
@colbyfayock 7 ай бұрын
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
@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
@raminkhodaie4063 11 ай бұрын
very insightful video
@colbyfayock
@colbyfayock 11 ай бұрын
glad it was helpful!
@DMKomori
@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
@colbyfayock Ай бұрын
is there something wrong in the video? or just pointing out that there are differences?
@DMKomori
@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
@andelianzio7457 4 ай бұрын
And what if a I wanna upload the image + data (name, email, message)
@colbyfayock
@colbyfayock 4 ай бұрын
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
@ruairidhgrass3479 Жыл бұрын
Thanks man, how did you get an environment variable in a client component? It's giving me an error,
@colbyfayock
@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
@ruairidhgrass3479 Жыл бұрын
@@colbyfayock thanks for the quick reply man, sorry I should have specified. I’m using nextjs on my project
@colbyfayock
@colbyfayock Жыл бұрын
@@ruairidhgrass3479np, similarly you'd want to add NEXT_PUBLIC_ in front of your environment variable then
@shreyaishere6783
@shreyaishere6783 11 ай бұрын
If we want a pdf or doc file instead of image?
@colbyfayock
@colbyfayock 11 ай бұрын
have you tried? it should work the same as long as you're not restricting the filetype
@PelleWidell
@PelleWidell 10 ай бұрын
Very good video. But what if I want to paste a snippet from memory?
@colbyfayock
@colbyfayock 10 ай бұрын
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
@DMC888 2 ай бұрын
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
@colbyfayock 2 ай бұрын
ah i thought i remembered that being unreliable but maybe i was missing something when poking around, thanks for the tip!
@blank.haruka
@blank.haruka 10 ай бұрын
Thank you sm!
@colbyfayock
@colbyfayock 10 ай бұрын
no problem!
@OzzTheWizzard
@OzzTheWizzard 11 ай бұрын
can you make a video showing how to do this one by one, step by step from scratch?
@salijoghli
@salijoghli 10 ай бұрын
Bro he literally did that
@OzzTheWizzard
@OzzTheWizzard 10 ай бұрын
@@salijoghli let me rewatch it and comment again
@davidsehi7109
@davidsehi7109 Жыл бұрын
Thanks man
@colbyfayock
@colbyfayock Жыл бұрын
No problem!
@abderrahmaneelfilali5933
@abderrahmaneelfilali5933 11 ай бұрын
suuper helpful
@colbyfayock
@colbyfayock 11 ай бұрын
🙌
Drag and dropping files in React using react-dropzone
26:26
Hamed Bahram
Рет қаралды 31 М.
Download Progress Bar in React with Fetch API
19:38
Colby Fayock
Рет қаралды 12 М.
This dad wins Halloween! 🎃💀
01:00
Justin Flom
Рет қаралды 42 МЛН
бабл ти гель для душа // Eva mash
01:00
EVA mash
Рет қаралды 4,4 МЛН
Sigma baby, you've conquered soap! 😲😮‍💨 LeoNata family #shorts
00:37
MAGIC TIME ​⁠@Whoispelagheya
00:28
MasomkaMagic
Рет қаралды 22 МЛН
React File Upload: How to Handle Files with Ease
15:16
Monsterlessons Academy
Рет қаралды 1,8 М.
This React Drag and Drop Component Is Magic
9:56
developedbyed
Рет қаралды 96 М.
You Don't Need a CMS - Use This Instead
28:55
Colby Fayock
Рет қаралды 24 М.
Generate a PDF in React
23:38
Colby Fayock
Рет қаралды 19 М.
Node.js File Upload API with Express Tutorial
35:25
Dave Gray
Рет қаралды 67 М.
The Last React File Input You'll Ever Need
7:44
Josh tried coding
Рет қаралды 17 М.
How is this Website so fast!?
13:39
Wes Bos
Рет қаралды 731 М.
React File Upload Tutorial with Drag-n-Drop and ProgressBar
59:06
Bruno Antunes
Рет қаралды 58 М.
This dad wins Halloween! 🎃💀
01:00
Justin Flom
Рет қаралды 42 МЛН