can you set a limit on number of files the user can select ?

[Hernando]

Hi , I am using the uploader but I want to limit the number of files that the user can select , the uploader is set to manual uploading and user can select multiple files , so if the user select 7 files and the MaxFileLimit is set to 5,  I want to add 5 files to the list and removed the rest  . 

 <kendo-upload 
                    [saveUrl]="uploadUrl" 
                    [autoUpload]="false" 
                    [actionsLayout]="actionsLayout"
                    [restrictions]="imageRestrictions" 
                    (select)="select($event)"
                    (remove)="remove($event)" 
                    (clear)="clear()"
                    (upload)="uploadEventHandler($event)"
                    (complete)="complete()">
                        <ng-template kendoUploadFileInfoTemplate let-file>
                            <div><img [src]="findPreview(file)" style="height: 50px;"> Name: {{file[0].name}} </div>
                            <div *ngIf="file[0].validationErrors">You cannot upload this file :: {{file[0].validationErrors[0]}}</div>
                          </ng-template>
                    </kendo-upload>

I have tried using the Select Event to remove the file using  e.preventDefault(); but it does stop the process and not files are added to the list if the users select more than 5 files .

 
publicselect(e: SelectEvent): void {
        const that = this;

        e.files.forEach((file) => {

            if (file.extension === '.jpg') {
                if (this.imageCount < this.maxImageCount) {

                    this.imageCount++

                    if (!file.validationErrors) {
                        const reader = newFileReader();

                        reader.onload = function (ev) {
                            const image = {
                                src: ev.target["result"],
                                uid: file.uid,
                            };

                            that.imagePreviews.unshift(image);
                        };
                        reader.readAsDataURL(file.rawFile);
                    }
                }else {
                     e.preventDefault();

                }
            }

        });
    }
 
             

Any ideas on how to remove the extra files or limit the number of files the user can select .

Thanks

 

 

 

 

 

 

 

[Martin]

Hi Hernando,

Thank you for the provided details.

Currently, the FileSelect and Upload components do not provide a built-in max number of files restriction.

The main reason why such a feature is not being implemented yet is because we don't have control over the number of files that the user selects from the file system and this is mainly because of security reasons.

What can be done is to manually check how many items are trying to be uploaded (on select event for example) and remove the files which exceed the max number with removeFileByUid method (clear all selected files with clearFiles method, or use the uploadFiles to proceed to upload the specified files). When the select event is prevented, the selected files will not be added to the list.

I hope this steers you in the right direction.

Regards,
Martin
Progress Telerik

[Hernando]

Hi Martin , 

I tried to used the removedFileById on the Select Event but I am getting errors on on the Remove  Event , The Remove event is expecting an Array of FileInfo not an UID . 

 

do you have an example ?

 }
                else {
                    //e.preventDefault();

                    console.log(`REMOVE FILE NAME  ${file.name} CURRENT COUNT ${this.mediaCount} out of ${this.maxMediaCount}`);
                    this.kendoUpload.removeFilesByUid(file.uid);
                }
            }

        });

        this.updateMediaCount();
    }

    public remove(e: RemoveEvent): void {
        //console.log(`remove event: ${e.files[0].name}`);

        if (this.videoExtensions.includes(e.files[0].extension)) {
            this.mediaCount--
            this.videoCount--
        } else {
            const index = this.imagePreviews.findIndex(
                (item) => item.uid === e.files[0].uid
            );

            if (index >= 0) {
                this.imagePreviews.splice(index, 1);
                this.mediaCount--
                this.imageCount--
            }
        }

        this.updateMediaCount();
    }

Thanks

 

 

 

 

[Martin]

Hi Hernando,

The best practice is to prevent the select event when the number of selected files exceeds the set restriction. Removing some of the selected files may confuse the user (especially when the selected files have identical names). Preventing the select event will not add any files to the list and this is the moment where an alert or some kind of notification can pop up to notify the user of the unsuccessful file upload.

Here is a demo that shows such an approach:

https://stackblitz.com/edit/angular-2gpvzv

In case selected files must be edited upon selection, the developer can splice the e.files in the select event handler, for exmaple:

  onSelect(e: SelectEvent, upload: UploadComponent) {
    const exceededFilesCount = e.files.length - this.maxFiles;
    e.files.splice(0, exceededFilesCount);
  }

This will remove the files that exceed the restriction if more than 5 files are selected at a time. Here is a demo:

https://stackblitz.com/edit/angular-nhzdpt

However, this approach requires a decent amount of further custom conditions as the user may select different amounts of files multiple times.

I hope this sheds some light on the case.

 

 

 

[Hernando]

the best solution is to splice the selected files and alert the user .

thanks.