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

Подписаться 27 тыс.

Просмотров 48 тыс.

50% 1

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/
📺 RU-vid: ru-vid.com?sub_c...
🐦 Twitter: / colbyfayock
📹 Twitch: / colbyfayock
✉️ Newsletter: www.colbyfayock.com/newsletter/
🎥 What I Use: www.colbyfayock.com/uses
#colbyfayock #reactjs #uploadfile #draganddrop #webdevelopment

Наука

Опубликовано:

26 июл 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 42

@tastymuffinmm 9 месяцев назад

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

@colbyfayock 9 месяцев назад

thank you!! 🙌

@ChesterRivas 7 месяцев назад

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

@colbyfayock 7 месяцев назад

appreciate the kind words!

@Brlitzkreig Месяц назад

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

@colbyfayock 29 дней назад

thank you🙏

@andinuruljihad2912 8 месяцев назад

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

@colbyfayock 8 месяцев назад

thank you!

@yourlinuxguy 2 месяца назад

Amazing tutorial, Thankyou so much.

@colbyfayock 2 месяца назад

thanks and no problem!

@peapuffer3514 10 месяцев назад

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

@colbyfayock 10 месяцев назад

thank you!

@leonardozerino9628 2 месяца назад

Great video my dude, thank you so much.

@colbyfayock 2 месяца назад

no problem!

@raminkhodaie4063 6 месяцев назад

very insightful video

@colbyfayock 6 месяцев назад

glad it was helpful!

@techcoderuz Месяц назад

thanks. Great tutorial

@colbyfayock Месяц назад

🙌

@John-eq5cd 4 месяца назад

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 4 месяца назад

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

@ruairidhgrass3479 9 месяцев назад

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

@colbyfayock 9 месяцев назад

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 9 месяцев назад

@@colbyfayock thanks for the quick reply man, sorry I should have specified. I’m using nextjs on my project

@colbyfayock 9 месяцев назад

@@ruairidhgrass3479np, similarly you'd want to add NEXT_PUBLIC_ in front of your environment variable then

@davidsehi7109 10 месяцев назад

Thanks man

@colbyfayock 10 месяцев назад

No problem!

@blank.haruka 5 месяцев назад

Thank you sm!

@colbyfayock 5 месяцев назад

no problem!

@vikashmishra7160 5 месяцев назад

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

@colbyfayock 5 месяцев назад

added src={preview as string} github.com/colbyfayock/my-react-file-upload/blob/main/src/pages/contact.tsx#L90

@colbyfayock 10 месяцев назад

Dig deeper into React with my course Full Stack React with Appwrite: spacejelly.dev/reactappwrite Otherwise get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news

@PelleWidell 5 месяцев назад

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

@colbyfayock 5 месяцев назад

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

@crypto1886 2 месяца назад

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 2 месяца назад

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?