<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>

 
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();

                }
            }

        });
    }
 
             

    toast$ = createEffect(() =>
        this.actions$.pipe(
            ofType(CoreActions.Toast),
            filter(({message}) => !!message),
            tap(({message, messageType}) => {
                this.currentNotification?.hide();
                this.currentNotification = this.notificationService.show({
                    content: message,
                    hideAfter: 5000,
                    position: {horizontal: 'right', vertical: 'top'},
                    //animation: {type: 'fade', duration: 400}, //NOTE: Adding an animation unfortunately causes the toast to stack very shortly when using the 'hide()' function..
                    type: {style: messageType, icon: true},
                    closable: false //NOTE: If true the 'hideAfter' property is ignored
                });
            })
        ),
    {dispatch: false} // Because only an action is done, we should not redispatch (that would cause an infinite dispatch loop of toasts)
    );