Native Upload - Concurrent upload

[ANTONIO]

I need to upload all selected files in one single request. However, the Kendo Upload groups the files selected by the user and sends them in different requests. For instance, if the user selects 3 files, and then selects 1 more file, the Upload will trigger 2 requests.

The JQuery version of the component can help me achieve what I want by having the "concurrent" option ( https://docs.telerik.com/kendo-ui/api/javascript/ui/upload/configuration/async.concurrent ). Is this feature missing in the Vue version?

[Petar]

Hi ANTONIO,

Te requested functionality of uploading all selected files with one request, no matter how they were selected(at once or on multiple selections) is demonstrated in this StackBlitz example. 

To achieve the demonstrated behavior, the below definition for the add event is used.

onAdd(event) {
  const firstId = event.newState[0].uid;
  event.newState.map((file) => (file.uid = firstId));
}

With the above, we make all file additions as one and when the "Upload" button is clicked, there is only one server request. 

Let me know if you have questions about the suggested solution.

Regards,
Petar
Progress Telerik

[ANTONIO]

Hi Petar! Thanks for your response!

The provided solution seems to work, but we lose the ability to remove a file individually. Is there any workaround for this?

It seems the "concurrent" feature of the Jquery component doesn't have this drawback.

[ANTONIO]

Never mind! Based on your provided solution, and since I'm handling the upload triggering myself, I came up with this:

upload() {
      const firstId = this.files[0].uid;
      this.files.map((file) => (file.uid = firstId));

      this.$refs["kendo-uploader"].onUpload();
    },

This way, the files are grouped only right before they're uploaded. Thanks again!

[Petar]

Hi, Antonio. 

Thank you for the shared solution! Your approach of updating the files' UID just before the upload is probably the best one.

I am happy that you've managed to implement what you need.