Native Upload - number of files restriction

[ANTONIO]

I'm trying to limit the number of files an user can upload. Searching on the internet, I found this solution for the jquery component (https://www.telerik.com/forums/how-to-restrict-the-number-of-files-for-a-single-upload):

function onSelect(e) {
    if (e.files.length > 20) {
        alert("Please select max 20 files.");
        e.preventDefault();
    }
}

Since the Vue Native Upload component does not have a "onSelect" event, but has an "onAdd" event, I tried to adapt its handling using the same logic:

function onAdd(e) {
    if (e.newState.length > 20) {
        alert("Please select max 20 files.");
        e.preventDefault();
    }
}

However, this trows an "e.preventDefault is not a function" error. And I need to prevent the default behaviour of the "onAdd" event, since it updates the "fileStateCopy" property of the component, which is not desireable in this scenario.

Is there any way I can implement a maximum number of files restriction on the Vue Native component?

[ANTONIO]

Well, I'd like to post a solution I came up with. I don't like it very much (i think the ideal would be using the event.newState property), but it's getting the job done:

data(){
    return {
      files: [],
    }
  },
methods:{
    function onAdd(event) {
        if (this.files.length + event.affectedFiles.length > 20) {
            alert("Please select max 20 files.");
         } else {
             this.files = [
                 ...this.files,
                 ...event.affectedFiles
             ];
           }
       }
    }

[Petar]

Hi, ANTONIO.

Thank you for sharing your solution with the community. It will surely help someone who is working on a similar to your scenario.

[ANTONIO]

Hello Petar. An update: although my posted "solution" is working for adding files, the component's behaviour got messed up (because, as I previously said, the "fileState" property continues to update out of sync, and the component seems to use this property to control the files that will be added/removed/have their status updated). The "fileState"  property is kept in sync with the event.newState property, and both of these important properties become useless to me (on this scenario).

For instance, i had to came up with a custom - and verbose - implementation of the "onRemove" event, that also does not use the event.newState property :

onRemove(event) {
      this.files = this.files.filter(file =>
        !event.affectedFiles.some(affectedFile => affectedFile.uid === file.uid));
    },

However, I'm still trying to figure out how I could handle the "onStatusChange" event. This event is needed to control what happened to the uploaded files, but it is also fed by the files listed on the "fileState" /"event.newState" properties, not the ones listed on my handled "files". property.

[Petar]

Hi, ANTONIO.

In your scenario, the shared approach is correct for the removal of already added files.

Am I correctly understanding that currently you only experience issues with the statusChange event? Can you please, give us more details about the difficulties that you meet? Or maybe there is something that you expect to have in the event handle but such is not available? 

Last but not least, did you check our Upload: Modes of operation demo? In this link, the first example uses the statusChange event and you can see how it can be used.

I hope the above links will help you achieve what you need. If you need further assistance with the current thread, please give us more details about the difficulties that you meet. Also, it will be easier to help you if you can provide a runnable example with the experienced issue.