[Vuejs]-File upload with extra data in Vue JS

by

1👍

✅

From the documentation’s list of config options there is the autoProcess option you can use to prevent automatic file upload

If false, files will be added to the queue but the queue will not be processed automatically. This can be useful if you need some additional user input before sending files (or if you want want all files sent at once). If you’re ready to send the file simply call myDropzone.processQueue().

By listening to the dropzone’s addFile event, you can access the new file and add it to a files array that you can display in your table and later access to add categories (however you want to do that).

this.myDropzone = Dropzone("#my-element", { 
  url: "/file/upload",
  addRemoveLinks: true,
  autoProcess: false
});

this.myDropzone.on("addedfile", file => {
  this.files.push(file)
});

Finally, you can manually or programmatically trigger the upload with the processQueue function you can call however you’d like, such as on a button click

<button @click="upload">Upload Files</button>

upload() {
   this.myDropzone.processQueue();
}
👤yoduh

Leave a comment