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

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.

Don't forget to subscribe :)

[akashpatil]

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

[alexandrm]

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]

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

[ImoniChris]

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?

[nordinzaidi]

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.

[alexmurithi]

how do i add that sign to check if we have a dragging class (.dragging)
??

[argeelearner]

I love your project based turtoials. Can you make a beginner course an Lavavel and vuejs? Thanks a million.