File upload with extra data in 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.

I would probably store the category back-end (in the database) rather than in the file — Bernard Borg
– Bernard Borg, Commented Jan 12, 2023 at 14:04

yoduh · Accepted Answer · 2023-01-12 19:37:05Z

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

Collectives™ on Stack Overflow

File upload with extra data in Vue JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related