Image Uploader Component with Vue.JS & Laravel - E02 (Drag & Drop)

6 лет назад

11,478 Просмотров

Image uploader component is something you find yourself looking for in almost any application you build. In this small series, we'll create a file uploader using Vue.JS that can handle images and validate their type. Finally we store the files in our Laravel storage directory.

In this episode we handle the drag and drop event, image validation and the file input `onChange` event.

Github Project: https://github.com/AfikDeri/vue-laravel-image-uploader

Follow me on Twitter: https://twitter.com/WeCodeTutorials

Don't forget to subscribe :)

Тэги:

#Laravel_and_Vue #Vue_and_Laravel #Vue.JS #vue_js #Image_Upload #Files_upload_with_laravel #Files_upload_with_vue #Image_Uploader #Vue.JS_2 #Laravel #Vue_Component #WeCode #we_code

Скачать видео

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

@akashpatil10 - 09.08.2021 08:02

Great video but the drag and drop doesn’t work for IE and firefox any suggestions

Ответить

@mammadgurbanov3086 - 16.02.2021 23:47

Thank you!

Ответить

@alexandrm3073 - 11.06.2020 10:45

Found a better solution, instead of adding a needless counter, just wrap the drop area with <div> and assign to it's children css property pointer-events: none.

Ответить

@fm_abid - 05.03.2020 18:45

Man it was very clear explanation.😃
Thanks for the video

Ответить

@silvershotvisualstudio5848 - 18.11.2019 15:48

Great!

Ответить

@nordinzaidi2286 - 06.05.2019 21:13

I really love the project based Tutorial and your style. I can see that you know a lot and you are very confident and concise. Keep it up! You got one more subscriber today.

Ответить

@ImoniChris - 03.10.2018 14:55

Thanks for this wonderful video.. am learning alot from it. However I wonder why e.preventDefault (); and e.stopPropagation () is not workin on onDrop method.. if I drop and image there it wil load an open d image straightaway. Any solution?

Ответить