Dropping multiple files when Upload is configured as Async single file (multiple = false)

1 Answer 421 Views
Upload
Gregg
Top achievements
Rank 1
Gregg asked on 28 Dec 2021, 04:40 PM

I have configured an Upload control as an Async Single File (multiple = false) upload as shown below.  When I drag-n-drop multiple files (e.g., three files) into the drop zone, one of the files is uploaded. Which of the files gets uploaded seems a bit random. It's confusing to the users that they can drop multiple files and only one gets uploaded.

I thought I could could check the event parameter passed into the Upload or Success events to see if e.files length is greater than one and if it is, do a e.preventDefault() and display a warning message. However, the e.files contains only one of the files that were dropped (e.g., I drop three files and the e.files.length is one). How do I determine if multiple files were dropped?

@(Html.Kendo().Upload()
      .Name("attachments")
      .Multiple(false)
      .ShowFileList(true)
      .Async(async => async.Save("Save", "Upload").AutoUpload(true))
      .Events(events => events.Error("onError").Success("onSuccess").Upload("onUpload").Select("onSelect")))
            

1 Answer, 1 is accepted

Sort by
0
Yanislav
Telerik team
answered on 31 Dec 2021, 12:55 PM

Hello Gregg,

 

Thank you for writing to us.

Since the Upload component is using the configuration :

  .Multiple(false)

It makes inaccessible the count of the files which the user is dragging. So in this case, my recommendation is to try removing this configuration and write a custom logic that stops the user from uploading more than one file. 

For example, hook for the upload event of the component : 

.Events(ev=>ev.Upload("onUpload"))

And within the handler check if the length of the array with files is bigger than one, if so stop the uploading, clear the files and show a validation message.

For a more details, please review the following sample : 

https://netcorerepl.telerik.com/wbPmxPur30fkzh5N07

Feel free to give this suggestions a try and let me know what you think.

 

Regards,
Yanislav
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Upload
Asked by
Gregg
Top achievements
Rank 1
Answers by
Yanislav
Telerik team
Share this question
or