File upload with extra data in Vue JS - vue.js

Question

I have used Vue Dropzone to upload files before which is fairly self explanatory but I had a question about something that I don't even know is possible but here goes:
Users drags files to dropzone area and they are added to the queue
User uploads files
User then sees a table with each file as a row where they have to select a category for each file
However, I don't want to upload anything until categories have been selected for each file so instead my thought is to bind the dropzone queue to a data property.
Something like this
mounted() {
this.dropzone = new Dropzone("#dropzone", {
url: "/file/upload",
addRemoveLinks: true
});
this.files = this.dropzone.files;
}
Then use that to create a table using v-for and in each row there would be a category selection dropdown.
<table>
<thead>
<tr>
<th>File Name</th>
<th>File Size</th>
</tr>
</thead>
<tbody>
<tr v-for="file in files">
<td>{{ file.name }}</td>
<td>{{ file.size }}</td>
</tr>
</tbody>
My question then becomes how would you assign a category to each file in the files data property?
In the end I want to send through the file and the category.

Answer 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();
}