Vuetify: [Feature Request] v-file-input: Allow drag and drop support

Created on 15 Jul 2019  路  8Comments  路  Source: vuetifyjs/vuetify

Problem to solve

Allows dragging files from local computer onto component.

Proposed solution

Allow drag and drop of files from local computer onto component.

feature

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!

All 8 comments

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)) }

Was this page helpful?
0 / 5 - 0 ratings

Related issues

alterhu2020 picture alterhu2020  路  3Comments

Antway picture Antway  路  3Comments

dohomi picture dohomi  路  3Comments

aaronjpitts picture aaronjpitts  路  3Comments

gluons picture gluons  路  3Comments