send one request instead of multiple

[mymtw]

Hi, is it possible that upload-component POST all selected files in 1 query? Currently he send multiple requests, i.e. count of sent requests = count of selected files. e.g. 3 files = 3 post requests. maybe smth wrong with my code:

<template>
  <div class="container-fluid upload-images-area">
    <form action="" method="POST" enctype="multipart/form-data">
      <label @dragenter="isDragOverDropzone = !isDragOverDropzone"
             @dragleave="isDragOverDropzone = !isDragOverDropzone"
             class="file-upload-dropzone"
             :for="input_id"
             :class="{
               'file-upload-dropzone_inactive': !isDragOverDropzone,
               'file-upload-dropzone_active': isDragOverDropzone
             }">
        <p>choose files for upload</p>
        <p>...or drop them</p>

        <FileUpload
          class="hide"
          name="image_files"
          :post-action="postAction"
          extensions="gif,jpg,jpeg,png"
          accept="image/png,image/gif,image/jpeg"
          input-id="gallery_files"
          :thread="3"
          :multiple="true"
          :drop="true"
          :value="files"
          @input-filter="inputFilter"
          @input-file="inputFile"
          ref="upload">
          Select files
        </FileUpload>
      </label>
    </form>

  </div>
</template>

<script>
import FileUpload from 'vue-upload-component/dist/vue-upload-component.part.js'
import { API_HOST } from '@/constants'

export default {
  name: 'Articles',
  components: { FileUpload },
  computed: {
  },
  methods: {
    inputFilter (newFile, oldFile, prevent) {
      if (newFile && !oldFile) {
        // Before adding a file

        // Filter non-image file
        // Will not be added to files
        if (!/\.(jpeg|jpe|jpg|gif|png)$/i.test(newFile.name)) {
          return prevent()
        }
      }
    },
    inputFile (newFile, oldFile) {
      if (newFile && !oldFile) {
        // add
        console.log('add', newFile)
      }
      if (newFile && oldFile) {
        // update
        console.log('update', newFile)
      }
      if (!newFile && oldFile) {
        // remove
        console.log('remove', oldFile)
      }

      if (newFile && newFile.xhr && !newFile.xhr.withCredentials) {
        newFile.xhr.withCredentials = true
      }

      // Automatically activate upload
      if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {
        if (this.uploadAuto && !this.$refs.upload.active) {
          this.isDragOverDropzone = false
          this.$refs.upload.active = true
        }
      }
    }
  },
  title () {
    return 'Arts'
  },
  data () {
    return {
      postAction: `${API_HOST}/api/v1/images`,
      isDragOverDropzone: false,
      input_id: 'gallery_files',
      uploadAuto: true,
      files: []
    }
  }
}
</script>

<style>
.file-uploads {
  overflow: hidden;
  position: relative;
  text-align: center;
  display: inline-block;
}
.file-uploads.file-uploads-html4 input[type="file"] {
  opacity: 0;
  font-size: 20em;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}
.file-uploads.file-uploads-html5 input[type="file"] {
  overflow: hidden;
  position: fixed;
  width: 1px;
  height: 1px;
  z-index: -1;
  opacity: 0;
}
.file-upload-dropzone {
  text-align: center;
  border-radius: 4px;
  padding: 100px 0;
  width: 100%;
  margin-bottom: 0;
}
.file-upload-dropzone:hover {
  cursor: pointer;
  background-color: #FDFCF0;
}
.file-upload-dropzone p {
  margin-bottom: 0;
}
.file-upload-dropzone_inactive {
  border: 2px dashed #290D01;
}
.file-upload-dropzone_active {
  border: 2px solid #290D01;
}
</style>

[NeoMarine]

Use Thread: https://lian-yue.github.io/vue-upload-component/#/documents#options-props-thread

[borie88]

Thread doesn't seem to do anything. Still makes multiple requests