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
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
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
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?
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
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 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
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
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
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] ................
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🙏
Worked, thank you! Spent all day yesterday trying to troubleshoot this.
🙌
Your tutorials are always solid and getting better. Thank you sir.
appreciate the kind words!
@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
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!
Amazing tutorial, Thankyou so much.
thanks and no problem!
Great video my dude, thank you so much.
no problem!
What's up buddy.😊 Watching your video after a while. Keep it up
thank you!
Excellent. Thanks for Sharing.
no problem!
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
thanks. Great tutorial
🙌
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
is the preview will work fine with pdfs? or any other except to png/jpeg files?
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
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?
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.
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
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?
is there something wrong in the video? or just pointing out that there are differences?
@@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
very insightful video
glad it was helpful!
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
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
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
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
Thank you sm!
no problem!
thank you
no problem!
suuper helpful
🙌
Thanks man
No problem!
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]
................
ah i thought i remembered that being unreliable but maybe i was missing something when poking around, thanks for the tip!