How to Drag and Drop File Upload with Vue

You can use the HTML drag and drop API to be able to drag and drop files with Vue. To successfully use the drag and drop feature, you must call preventDefault on dragEnter and dragOver because their default behavior does not allow elements to be dropped. You can also prevent the default behavior for drop on the parent so you do not accidentally open the file in the browser if you miss the drop zone as shown below:

<div id="content"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
  const app = new Vue({
    data: () => ({ File: []}),
    template: `
    <div style="border-style:solid;" @dragover.prevent @drop.prevent>
      <input type="file" multiple @change="uploadFile"/>
      <div @drop="dragFile" style="background-color:green;margin-bottom:10px;padding:10px;">
        Or drag the file here
        <div v-if="File.length">
          <ul v-for="file in File" :key="file">
            <li>{{file.name}}</li>
          </ul>
        </div>
      </div>
    </div>
    `,
    methods: {
      uploadFile(e) {
        this.File = e.target.files;
      },
      dragFile(e) {
        this.File = e.dataTransfer.files;
      }
  }
  });
  app.$mount("#content");
</script>

---

---

More Vue Tutorials

• Methods in Vue
• Use the Ternary Operator for Conditionals in Vue
• Vue Email Validation
• How to Copy Content to the Clipboard in Vue
• Creating Computed Properties with Vue's Composition API
• Toggle Visibility in Vue
• Add Global Variables to Vue JS Templates