Submitting a dropzone with a form in vue

Question

I've got a form that also uses vue2-dropzone package. I think I've almost got it except that I'm not able to send the rest of my form. They way I'm trying to get the rest of my form is by grabbing my form object from the data() section, but the only thing that gets sent is the file and the rest of the form isn't included and when I console.log(this.form) I get undefined. Here is my vue file

<template>
    <div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label>Name</label>
                    <input type="text" class="form-control" v-model="form.name">
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-group">
                    <label>Description</label>
                    <input type="text" class="form-control" v-model="form.description">
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <label class="form-label">Select a file for upload</label>
                <vue-dropzone ref="myVueDropzone" id="dropzone" style="align-content: center" @vdropzone-file-added="fileAdded()" @vdropzone-success="uploadSuccess" @vdropzone-removed-file="removedFile" @vdropzone-error="showUploadError" :options="dropzoneOptions"></vue-dropzone>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <button type="button" id="add-product" class="btn btn-success">Add Product</button>
            </div>
        </div>
    </div>
</template>

<script>
    import vue2Dropzone from 'vue2-dropzone'
    import 'vue2-dropzone/dist/vue2Dropzone.min.css'

    export default {
        props: [],
        components: {
            vueDropzone: vue2Dropzone
        },
        data(){
            const token = document.head.querySelector('meta[name="csrf-token"]').content
            return {
                dropzoneOptions: {
                    url: `/api/product/save`,
                    thumbnailWidth: 150,
                    maxFilesize: 9.5,
                    headers: { 'X-CSRF-TOKEN': token },
                    dictDefaultMessage:"Select file for upload",
                    addRemoveLinks: true,
                    autoProcessQueue: false,
                    init: function(){
                        let myDropzone = this;

                        $("#add-product").click(function (e) {
                            e.preventDefault();
                            myDropzone.processQueue();
                        });

                        this.on('sending', function(file, xhr, formData) {
                            var data = this.form;
                            console.log('dropzone sending data', data);
                            $.each(data, function(key, el) {
                                formData.append(el.name, el.value);
                            });
                        })
                    }
                },
                form: {
                    name: null,
                    description: null,
                },
            }
        }
    }
</script>

Answer 1

You're looping through your object wrong. Try this.

$.each(data, function(key, el) {
  formData.append(key, el);
});

var T = {
  form: {
    name: '123',
    description: 'asdfasdf',
  }
};

$.each(T.form, function(key, el) {
  console.log(key, el);  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>