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?

I'm not sure if this is your issue put you are referencing two different components. In mounted `this.$refs.myVueDropzone` in onSubmit `this.$refs.myDropzone` — Tim Wickstrom, Sep 30 '20 at 19:14
Yes, autoProcessQueue is set to false. Then I set the file like: this.$refs.myVueDropzone.manuallyAddFile({size: photo.size, name: photo.name, type: photo.type}, photo.url); — Elijah Johannson, Sep 30 '20 at 21:12
A bit more info: this.$refs.myVueDropzone.dropzone.files.length shows 1 but getQueuedFiles() returns nothing. — Elijah Johannson, Sep 30 '20 at 22:01
I think the issue is the file is being added but not put into the queue so when I try to call processQueue() there is nothing to do. — Elijah Johannson, Sep 30 '20 at 22:13

score 2 · Accepted Answer · answered Oct 01 '20 at 00:01

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>

Thanks, for confirming what I was suspecting that it adds the file but there is nothing to process. I found [this](https://stackoverflow.com/questions/20910571/dropzonejs-submit-form-without-files) question/answer which is what I was hoping for but none of those solutions work so I think your solution is probably the simplest way to handle it. — Elijah Johannson, Oct 01 '20 at 18:28
In essence, that is what this is doing, this is checking if there are files, if so, upload them, if not submit the form. Doing so in this manner provides the developer a clear separation of concerns. save form, which checks the uploadQueue, submitForm, which submits your form, and optional methods to handle upload successes or failures. — Tim Wickstrom, Oct 01 '20 at 19:01
FYI, this is a simplified version, of how I am using dropzone in a project that handles 1000's of file uploads a week. — Tim Wickstrom, Oct 01 '20 at 19:02

Vue2-Dropzone process form when files manually added

1 Answers1