Vue2-Dropzone process form when files manually added

Question

Is it possible to manually process the dropzone form (or queue) when the file is manually loaded?

We have the concept of a drivers license. The user uploads a photo and enters other information such as the license number, expiration date, etc.. The user clicks the save button and I call processQueue() which submit the entire form. This all works just fine.

Next, we display this license in a non-form way with an edit button. When they click the "Edit" button, I display the form again and populate the fields with previously entered data including manually adding the previously submitted photo of their license. Basically like this from the documentation:

mounted: () {
    var file = { size: 300, name: "Icon", type: "image/png" };
    var url = "https://example.com/img/logo_sm.png";
    this.$refs.myVueDropzone.manuallyAddFile(file, url);
}

This appears to all work as expected. I see the dropzone with a thumbnail of the previously uploaded file. The input fields are all populated with previously entered data.

The problem occurs when I try to process this form again with:

onSubmit() {
    this.$refs.myVueDropzone.processQueue()
}

If they only make changes to the input fields like the license number and do not upload a new file, the onSubmit() or processQueue() does not work. It only works if I remove and re-add a file or add a second file. It's as if it does not recognize a file has been added. Is manuallyAddFile only for displaying and not actually adding the file?

How can I submit this form when the file is manually added?

Answer 1

After a bit of research on Vue2 Dropzone

Manually adding files Using the manuallyAddFile method allows you to programatically add files to your dropzone area. For example if you already have files on your server that you'd like to pre-populate your dropzone area with then simply use the function when the vdropzone-mounted event is fired.

source

So the solutions is to check and see if anything needs to be processed in your queue. Since you manually added the file you already have it, it does not need to be uploaded again. Only if the user adds a new file does it need to be uploaded.

You could do this a few ways, but I would recommend something like the example below for it's simplicity:

onSubmit() {
  if (this.$refs.myVueDropzone.getQueuedFiles().length) {
    this.$refs.myVueDropzone.processQueue()
  }
}

If you need to wait until the queue has finished processing to send your form you can leverage vdropzone-queue-complete. Below is a quick example:

<template>
  <!-- SOME FORM ELEMENTS HERE -->
  <vue-dropzone
    ref="myVueDropzone"
    :options="dropzoneOptions"
    @vdropzone-error="errorUploading"
    @vdropzone-success="fileUploaded"
    @vdropzone-queue-complete="submitForm"
  />
  <button @click="saveForm">Save</button>
</template>
<script>
  export default {
    methods: {
      saveForm () {
        if (this.$refs.myVueDropzone.getQueuedFiles().length) {
          this.$refs.myVueDropzone.processQueue()
        } else {
          this.submitForm()
        }
      },
      errorUploading (file, message, xhr) {
        // do something when a file errors
        // perhaps show a user a message and create a data element to stop form from processing below?
      },
      fileUploaded (file, response) {
        // do something with a successful file upload. response is the server response
        // perhaps add it to your form data?
      },
      submitForm () {
        // Queue is done processing (or nothing to process), you can now submit your form
        // maybe check for errors before doing the below step
        // do what ever you need to submit your form this.$axios.post(...) etc.
      }
    }
  }
</script>