File Uploads in Vue.js
Get your learning on with File Uploads in Vue.js
Get access to the most comprehensive Vue.js video library in the world. Over 300 video lessons including the newest Vue 3 features.
A More Robust Drag And Drop Approach
In this lesson, we make our drag and drop component more robust with visually appealing drag over states and get file type validation working again since the drag and drop support killed our current solution.
By listening to dragenter, dragover, dragleave, and drop, events we can easily update reactive state to modify the classes on the dropzone for a visually appealing drag state.
By using the attr-accept npm package, we can still support rules fit for the accept attribute (like wildcards in mime types, and file extensions) but we can perform the validation checks in JavaScript.
Links