Как я могу поставить файл в очередь вручную в dropzone/ vue dropzone 2

Question

Я работаю над загрузкой функциональности для продукта, который я создаю с помощью vuedropzone 2, из документов dropzone http://www.dropzonejs.com/, возможно предотвратить автоматическое добавление в очередь принятых / добавленных файлов установив для autoQueue значение false, там также указывается, что файлы можно ставить в очередь вручную, вызывая enqueueFile(file) вручную.

настройка autoQueue to false работает, однако, когда я пытаюсь добавить файл вручную в очередь, он не работает, и я получаю эту ошибку this.$refs.dropzone.enqueueFile is not a function мой сценарий:

 new Vue({
     data: {
      dropzoneOptions: {
        url: 'https://httpbin.org/post',
        thumbnailWidth: 150,
        maxFilesize: 1000,
        addRemoveLinks: true,
        autoProcessQueue: false,
        autoQueue: false,
        dictDefaultMessage: "<i class='is-size-150 fa fa-cloud-upload'>
            </i>",
        headers: {
          'Access-Control-Allow-Origin': '*',
        },
        parallelUploads: 1,
      },
     },
    methods: {
      upload() {
        document.querySelector('.dropzone').click();
      },
     startUpload() {
       this.$refs.dropzone.getAcceptedFiles().forEach(f => this.$refs.dropzone.enqueueFile(f));
    ....
    },
   })

my template: 
  div
    button.button.is-primary(@click="upload") upload Document(s)
    dropzone(
      v-show="false",
      :id="id",
      ref="dropzone",
      :maxNumberOfFiles="100" ,
      :maxFileSizeInMB="1000",
      :options="dropzoneOptions",
      @vdropzone-upload-progress="updateFilename",
      @vdropzone-files-added="handleFilesAdded",
      @vdropzone-error="handleUploadError",
      @vdropzone-total-upload-progress="progress",
      @vdropzone-queuecomplete="handleUploadComplete",
      @vdropzone-success="fileUploaded",
      :parallelUploads="1",
    )

   // this dialog modal shows only when files have been selected after clicking upload document button 
   el-dialog(title="Upload Files", :visible.sync="hasAddedFiles")
    div(slot="title")

    // button for adding more files before clicking start upload
      button.is-info.button.ml-15(@click="addFiles") Add File(s)

    // table that lists all selected files
    el-table(:data="addedFiles", :height="400")
      el-table-column(type="index" :index="1")
      el-table-column(
        property="name", 
        show-overflow-tooltip,
        label="Name", 
        min-width="200"
      )
      el-table-column(property="type" label="File type")
      el-table-column(label="Delete" width="100")
        template(scope="props")
         // button for removing a file
         button.button.trash(
           :class="$style.trash", 
           @click="removeFile(props.row)",
         )
          i.material-icons delete
    div(slot="footer")
      // select file type
       el-select(
         v-model="addedFilesType"
         filterable
         allow-create
         placeholder="Choose file(s) type"
       )
         el-option(
           v-for="(item, index) in documentTypes"
           :key="index"
           :value="item"
         )

       // button for enqeueing and start processing the queue in order to start files upload 
       button.button.is-primary.is-medium.ml-15(
        @click="startUpload", 
        :disabled="!addedFilesType.length",
       )
         span.icon
           i.material-icons cloud_upload
         span Start Upload

Answer 1

enqueueFile не делегируется в компоненте vue-dropzone. Так что это не доступно на this.$refs.dropzone,

Но есть решение для этого (хотя и не очень элегантное). Вы должны быть в состоянии позвонить this.$refs.dropzone.dropzone чтобы получить базовый объект dropzone.

Так this.$refs.dropzone.dropzone.enqueueFile(f) должно сработать.