Skip to content

Upload multiple files as single POST request is not working?? #132

@atheleron

Description

@atheleron

Hi I have issue uploading multiple images with form text!!

Problem is that when I send for an example 3 images it duplicates my post text inside database because it POST's form 3 times unfortunatly function uploadMultiple isn't working as it should

uploadMultiple send all items in array as single POST REQUEST but it isn't working??

Dropzone in jQuery works fine it sends all 3 files to server in single POST REQUEST
Other Dropzone options like autoProcessQueue, parallelUploads ..etc work fine and Dropzone isn't sending anything to server until I press submit button

  // Disabling autoDiscover, otherwise Dropzone will try to attach twice.
  Dropzone.autoDiscover = false;
  // or disable for specific dropzone:
  // Dropzone.options.myDropzone = false;

  $(function() {
  // Now that the DOM is fully loaded, create the dropzone, and setup the
  // event listeners

    var myDropzone = new Dropzone('#drophere', {
        autoProcessQueue: false,
	uploadMultiple: true,
        parallelUploads: 100,
        maxFiles: 100,
    });

    $('#btnUpload').on('click', function () {
        myDropzone.processQueue();
    });

  })

When I replicate required options to my script multipleUpload doesn't work

<template>
  <div id="app">

    <input type="text" v-model="postContent" class="form-controll">

    <dropzone id="myVueDropzone"
              ref="createPost"
              url="api/posts"
              :useFontAwesome="true"
              v-on:vdropzone-success="showSuccess"
              v-bind:dropzone-options="dropzoneOptions"
              v-bind:use-custom-dropzone-options="true">
        <!-- Optional parameters if any! -->
        <input type="hidden" name="post" v-model="postContent">
    </dropzone>

    <button type="submit" class="btn btn-primary" @click="submitData()">

  </div>
</template>

<script>
  import Dropzone from 'vue2-dropzone'

  export default {
    name: 'MainApp',
    components: {
      Dropzone
    },
    data () {
      return {
        
        postContent: '',

        dropzoneOptions: {
          autoProcessQueue: false,
          uploadMultiple: true,
          parallelUploads: 100,
          maxFiles: 100,  
        }

      }
    },
    methods: {
      'showSuccess': function (file) {
        console.log('A file was successfully uploaded')
      },
      'submitData': function () {
        this.$refs.createPost.processQueue()
      }
    }
  }
</script>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions