Using dropzone.js in vue, calling function with image file name

Question

I'm having a hard time getting anything to work with this the way I need it, but I have a working dropzone instance in my Vue project.

I can upload the image and call functions within the dropzone code, however, I need to call a function directly from the form in the html in order to send the 'card' object.

All I need to do is call a function when a file is added through the dropzone form, with the filename.

My code:

    <div class="uk-width-3-10">
                    <form v-on:change="imageChange(card)" method="post" action="{{url('product/parts/upload/store')}}" enctype="multipart/form-data"
                          class="dropzone" v-bind:id="'dropzone-'+i">
                    </form>
                </div>

... 

    imageChange(Card){
        console.log('working');
    },
    addCard(){
      Vue.nextTick(function () {
              new Dropzone("#dropzone-"+cardIndex, {
                maxFilesize: 12,
                renameFile: function (file) {
                    var dt = new Date();
                    var time = dt.getTime();
                    return time + file.name;
                },
                acceptedFiles: ".jpeg,.jpg,.png,.gif",
                addRemoveLinks: true,
                timeout: 50000,
                removedfile: function (file) {
                    console.log(file.upload.filename);
                    var name = file.upload.filename;

                    var fileRef;
                    return (fileRef = file.previewElement) != null ?
                        fileRef.parentNode.removeChild(file.previewElement) : void 0;

                },
                init: function() {
                    this.on("addedfile", 
                    function(file) { 
                        instance.imageZoneNames.push({name: file.upload.filename});
                        console.log(file);
                        console.log(instance.imageZoneNames);
                    });
                }
            });
            });
         }

Ari Shojaei Ari Shojaei · Accepted Answer · 2020-08-22T05:09:24

Dropzone has many events, You used removedfile() event! there is another event called addedfile() and execute when a file is added to the dropzone list

imageChange(card) {
 console.log(card)
},

addCard() {
 Vue.nextTick(() => {
  new Dropzone('#dropzone-` + cardIndex, {

   addedfile(file) {
    this.imageChange(file);
   }

  }
 }
}

Using dropzone.js in vue, calling function with image file name

1 Answers