uploadMultiple doesnt seem to work

[vafl-brut]

Hello! Great plugin, thanks! One problem so far - setting uploadMultiple: false doesnt seem to have any effect - Im still able to select multiple files in the file selector dialog. However, setting maxFiles: 1 does the trick but I have to clear files on upload to allow for re-upload. Is this just me or this behavior is counter-intuitive ?

Thanks!

[thetutlage]

The uploadMultiple options works a little different. If set to true multiple files will be sent at once in a single request and also user will be able to select multiple files.

If you set it to false the user can still select multiple files, but each file will be sent as a single request. Which means for 5 files 5 HTTP requests will fire.

[vafl-brut]

in this case, how do i limit to one file per upload yet allow for multiple uploads 'per session'?

[cb109]

Setting the VueClip instance's files Array to [] did not clear the error message for when trying to use the same instance for another upload. Any suggested way to reset the instance to pristine state?

[cb109]

Resetting the VueClip instance by applying buffered state like here https://github.com/vuejs/vue/issues/702 did not work for me, but this hack seems to achieve kind of what I am looking for: I draw the VueClip conditionally using v-if, then I can "reset" it by removing it from the DOM for a single draw cycle and add it back in:

<vue-clip v-if="showUploader"></vue-clip>

methods: {
  reset: function() {
    var vm = this;
    vm.showUploader = false;
    Vue.nextTick(function() {
      vm.showUploader = true;
    });
  }
}

I would very much prefer a myVueClipInstance.reset() method if that is a possibility for the future :sweat_smile:

[alexsasharegan]

@cb109 Have you tried vueClipInstance.removeAllFiles()? You could try throwing that in your reset method and tell us yea or nay

[alexsasharegan]

P.S. I'd rather merge than fork, but I'm working on making this a little more esNext compliant here: https://github.com/alexsasharegan/vue-clip. I'm also leaning towards more idiomatic vue code—one example being emiting the Dropzone events right of the component rather than using a matching set of callbacks. I think the component can also stay lighter that way. Contributions or feedback welcome.

I work for a print company, so I have a constant need for file upload components. I'm working to push our front-end stack to Vue.js, so I will intend on maintaining something after I ship our e-commerce site refresh.

[cb109]

@alexsasharegan Yes I tried that, it rendered the instance unusable for me, which was bad because it's part of a modal dialog that needs to work more than once. So far my hack above seems to do the job.

[alexsasharegan]

P.S. @vafl-brut I think you could set options.parallelUploads = 1 for 1 upload per go.

[alexsasharegan]

@cb109 I see what you're doing now, basically forcing Vue to garbage collect the existing instance and make a fresh one. Is it just error messaging you need clear? Maybe you could include more of your modal code. I don't see any Dropzone methods to clear an error message, but I feel like that is something you would display "manually" in your component.

[alexsasharegan]

@vafl-brut If you need something more dynamic, I bet you could set options.maxFiles = 1 and implement the logic you need to restrict the flow on the maxfilesexceeded event (which I believe vue-clip uses a onMaxFilesExceeded option to pass your callback). But at that point, maybe you shouldn't make everything clickable/draggable, but add files "manually" through your own custom logic.

...or use the accept hook to validate each file coming through...

Maybe I'm overthinking it though. Seems parallelUploads or some options should be the right way.

[electronrecord]

Any news? I do have the same issue, as being able to load one file per upload (for avatar), but multiple times per session (as someone would want to change his avatar pic more than once per session). I have tried with v-if on vue-clip component, and it is working, but i am sure that is not the right way.

[alexsasharegan]

@electronrecord I believe in that use case you want to set these options:

{
  uploadMultiple: false, // default
  parallelUploads: 1 // defaults to 2
}

Although I believe Dropzone.js might be pushing us into a corner due to this little bit of logic:

if ((this.options.maxFiles == null) || this.options.maxFiles > 1) {
  this.hiddenFileInput.setAttribute("multiple", "multiple");
}

We want to leave off the multiple attribute, but accept more than one max file. If you can dive into the dom and grab the hidden input, you should be able to reverse this with something like this:

document.querySelector('.dz-hidden-input').removeAttribute("multiple")

The other alternative is ugly and requires you to put a ref on your vue-clip component, but I think it looks like this:

{
  // inside your component using vue-clip
  // add ref="vue_clip" to the vue-clip in your template
  mounted() {
    this.$refs.vue_clip.uploader._uploader.hiddenFileInput.removeAttribute("multiple")
  }
}

[alexsasharegan]

And please, let us know if anything works! Let's try and leave a clear solution for whoever comes after and has the same issue.

[alexsasharegan]

See here for the multiple attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-multiple

[electronrecord]

Well, for me the working thing is to put a v-if directive on vue-clip, and execute it (toggle a var like isVueClip from true - false - true) from the complete function (the one which tells that the upload is completed), with a setTimeout of 10 ms. It works fine, so i'm happy with this for the moment, cause i do not have the time to dig the inside code.