Vue-dropzone: maxNumberOfFiles & maxFileSizeInMB are ignored

Created on 2 Mar 2017 · 5Comments · Source: rowanwins/vue-dropzone

Hi,

I have some trouble with maxNumberOfFiles & maxFileSizeInMB, both are ignored, i dont know why...

Other props (ref, url, the event success, headers, language) works but those 2 are ignored.

Source

Shhu

Most helpful comment

The names of the parameters have changed.

They are now maxFilesize and maxFiles

This below is how I'm setting the options and it is all working wonderfully

images.js component

import Dropzone from 'vue2-dropzone'

Vue.component('image-uploader', {
  components: {
    Dropzone
  },
  data() {
    return {
      dzOptions: {
        dictDefaultMessage: 'Drop your images here or click to choose (at least 192x192px)',
        acceptedFiles: '.jpg,.jpeg,.png',
        maxFiles: 2,
        maxFilesize: 1,
        headers: {'X-CSRF-TOKEN': Laravel.csrfToken}
      },
    };
  },
  methods: {
    'showSuccess': function (file) {
      console.log('A file was successfully uploaded')
    }
  }
});

inside my blade template:

<image-uploader>

    <dropzone id="ImageUploader" url="/image/upload" :use-custom-dropzone-options=true :dropzone-options="dzOptions" v-on:vdropzone-success="showSuccess">

    </dropzone>

</image-uploader>

works perfectly

vesper8 on 4 May 2017

👍2

All 5 comments

Gday @Shhu
The props should be passed through like
```
:max-number-of-files='2'
````

Unfortunantly the whole camelcasing props name thing is a bit annoying.

rowanwins on 3 Mar 2017

Hi,

Thanks for your answer @rowanwins !

:max-number-of-files='2' works but :max-file-size-in-mb="200" doesnt. Did i missed something ?

Shhu on 6 Mar 2017

👍1

Hi @Shhu

So because of the camelcasing thing you need to do :max-file-size-in-m-b="200" which is really stupid, I'll change this in the next release.

Cheers

rowanwins on 7 Mar 2017