Build a DropZone (Drag/Drop) Component With Vue 3 (No Library)

[@JohnKomarnicki]

Hopefully you enjoy this little component. If you do, i'd really appreciate you leaving a like on the video! I'm working on a larger project that should hopefully be released next week. Have a great weekend everyone!

[@oooii2403]

The ways you explain is like telling a story and your voice is pretty good too. Loved it so much.

[@JohnKomarnicki]

I appreciate that! 😀

[@warzonevideos]

Saw your video on Brad channel, Your teaching style is Awesome. That Crispy voice is just a ++ :D

[@JohnKomarnicki]

I appreciate it 😀

[@sanusivictorolajuwon514]

Words can't really explain how helpful your videos have been. I made of this today in a project and it was a breeze. Thanks a lot.

[@JohnKomarnicki]

I’m glad to hear that :)

[@JosePerez-qt8cf]

Your tuts it's my source to learn Vue, thanks a lot

[@JohnKomarnicki]

Happy to hear that! :)

[@abdelmonem88]

really awesome and so simple explanation for something that looks complicated ... thank you, bro

[@nungumaingi6261]

Awesome. Really needed this and you've explained it perfectly. 👍👍

[@JohnKomarnicki]

Awesome to hear 🙌

[@AntNZ]

What would be super awesome is a follow up video on how to hook with with supabase and cloudinary 😁😁😁😁😁😁😁😁😁😁😁

[@gabrielsalinasszada7283]

what a delighted explanation

[@Jisifus]

What would a function to remove the file look like? I made a label with an X emote that triggers a function to set dropzoneFile.value to null, hower that doesn't trigger a re-render and errors out (Unhandled error during execution of render function , Uncaught (in promise) TypeError: $setup.dropzoneFile is null)

[@mohammedbadah5537]

Awesome explanation, John ... thank you a lot

[@JohnKomarnicki]

Glad it was helpful!

[@kozele]

Thank you. Your channel is helping me a lot!!!

[@JohnKomarnicki]

Happy to hear that!

[@dimwel]

Thank you so much for the video, can you explain how to grab multiple files and the send it in POST request? Thank you

[@luukwagenaar4155]

Quality as always! Ever thought about doing a video with nuxt?

[@JohnKomarnicki]

Appreciate it it Luuk! Is nuxt compatible with vue 3?

[@luukwagenaar4155]

@@JohnKomarnicki not yet. You can use vue 2 and import the composition API as a nuxt plugin but official out of the box support has not been implemented yet

[@subhashmalireddy]

Simple yet a great one. ❤️ed it.

[@JohnKomarnicki]

Thanks a lot!

[@subbiwork8955]

Hey this is my other account, haha.

[@ahheask9527]

It save image to local project?

[@230_delfinofahrezaakbar9]

nice vid btw how to save or store the images file to database? how to add the method after drop the file to send tge data to server ?

[@davidfernandezbajo]

Great content! Is it possibe for you to do a follow-up on creating the option to eliminate the file if the user made an error when selecting?

[@JohnKomarnicki]

Appreciate it David! Actually all you would possibly need to do is either drag a new file into the field, and it would overwrite the current file. Or add a button that would clear where we stored the file in the data value!

[@davidfernandezbajo]

@@JohnKomarnicki Thank you!

[@ĐạtNguyễn2k-r4t]

thanks for your idea

[@codingkobra]

could u do a MEVN project or do u use firebase exclusively

[@JohnKomarnicki]

In the future, ill dabble with that. Currently mainly using firebase for backend projects!

[@dcxweb]

Truly excellent video

[@JohnKomarnicki]

Thank you!

[@YoNonoGaming]

Love your videos, they've been a huge help. Any way you know how to implement this code with previewing the image? I'm trying to store the dropzonefile as a url object, and displaying it from there but having some troubles. Any way you would do it? Thanks again!

[@JohnKomarnicki]

I appreciate it! Maybe this video i made a few months back would be helpful? kzbin.info/www/bejne/qXqcinerrLx9aMk

[@YoNonoGaming]

@@JohnKomarnicki You're a huge help man! Got it working

[@ahheask9527]

I want to upload images to local project (localhost:8080) and file name save in database api (localhost:3001)

[@NeelanshMathur]

Thanks for this!

[@mohamedtousif7763]

how to do this in vue 2?

[@moosesaid]

Thank you!

[@d-landjs]

Thnks so much!!!

[@bartoszsowa5140]

Thanks

[@sammybammy52]

thanks bro

[@phpisdead]

Best video

[@KingOG8]

"here" it is if you know... it triggers like crazy

[@ahheask9527]

I wanna upload image to my local project (localhost:8080/assets/images/), but it not work