Allows dragging files from local computer onto component.
Allow drag and drop of files from local computer onto component.
This is something we discussed as a v2.1 feature.
I want this! :)
Thought we already had it, need it for a web app I'm working on. Will have to use a nasty hack to implement it while waiting.
Is there a time estimate on this feature? I would also like to use this feature for a dashboard I am building for a student project.
I'm also interested in this feature. Are you already working on it? If not, would you accept a pull request for this feature if I implement it?
drag-and-drop functionality shouldn't be limited to just v-file-input
. It should be available in a much broader scope as it can be applied to many components as well as enhance future components (for example having draggable/droppable layouts, dropzones, drag and drop lists, file input / file-upload).
@Raullllll We are currently not actively working on it, but it is a planned feature. We would enterain a draft for it in a broader scope, fine tune it, and get it to be a solid feature (and then we can start looking to adding it into components). Feel free to reach out to us on Discord if you are interested.
For those who don't want to wait till this is in an official version, I just figured out how to achieve this quite easily.
Just add this to either the parent element of the v-file-input component or any other html-element where a file should be droppable:
v-cloak @drop.prevent="addDropFile" @dragover.prevent
And in the addDropFile
function just access the dataTransfer object and set it to the same model as your v-file-input:
addDropFile(e) {
this.file = e.dataTransfer.files[0];
}
Hope this helps!
thank you @FloPrey - it works great. For those who need multiple files, addDropFile function should look like below.
It actually works for both single and multiple files.
addDropFile(e) {
this.files = Array.from(e.dataTransfer.files);
},
thank you @FloPrey and @ivanvorona! Just wanted to add, that we need to use v-model='files' to store the files into our data and to bind files to our file-input. To use drag and drop function multiple time we can use
addDropFile(e) {
this.files.push(...Array.from(e.dataTransfer.files))
}
Most helpful comment
For those who don't want to wait till this is in an official version, I just figured out how to achieve this quite easily.
Just add this to either the parent element of the v-file-input component or any other html-element where a file should be droppable:
v-cloak @drop.prevent="addDropFile" @dragover.prevent
And in the
addDropFile
function just access the dataTransfer object and set it to the same model as your v-file-input:addDropFile(e) { this.file = e.dataTransfer.files[0]; }
Hope this helps!