File Upload Popup Screen - ejs Uploder -Issue

[sathiyan senathirajah]

1) how to enable/disable Upload button by developer condition 

2) how to use args.isModified = true in RemovingEventArgs

Attachment: UploadScreen_77718dba.zip

[Sureshkumar P]

Hi Sathiyan, 

 

Greetings from Syncfusion support. 

 

Query 1: how to enable/disable Upload button by developer condition 

 

Answer:  

            we have validated your requirement, currently we have no option to customize the upload buttons. We have already considered to Support to given Clear/Upload buttons are customizable buttons at our end and this support will be included in any one of our upcoming releases. We will implement the feature based on the customer request count and priority.   

  

You can track the status of the requested requirement from the below feedback link.  

  

Link: https://www.syncfusion.com/feedback/10605/  

  

Until then we suggest using the below workaround solution.  

  

Kindly refer the below sample with code example. 

[app.component.html] 

 

<ejs-uploader #defaultupload id='defaultfileupload' [allowedExtensions]='extentions' 

                [autoUpload]='uploadType' [asyncSettings]='path' [dropArea]='dropElement' 

                (canceling)="onFileSucess($event)" (removing)='onFileRemove($event)' [buttons]="buttons" ></ejs-uploader> 

 

[app.component.ts] 

 

import { Component, ViewChild, ViewEncapsulation, Inject } from "@angular/core"; 

import { EmitType, detach, createElement } from "@syncfusion/ej2-base"; 

import { UploaderComponent, RemovingEventArgs } from "@syncfusion/ej2-angular-inputs"; 

import { createSpinner, showSpinner, hideSpinner } from "@syncfusion/ej2-popups"; 

import { CheckBoxComponent } from "@syncfusion/ej2-angular-buttons"; 

import { Uploader } from "@syncfusion/ej2-inputs"; 

 

var wireActionButtonEvents = (Uploader.prototype as any).wireActionButtonEvents; 

 

(Uploader.prototype as any).wireActionButtonEvents = function () { 

    var allowupload = true; 

    for (var i = 0; i < this.filesData.length; i++) { 

        if (this.filesData[i].status !== "Ready to upload") { 

            allowupload = false; 

        } 

    } 

    if (!allowupload) { 

        this.uploadButton.classList.add("e-disabled"); 

        this.uploadButton.classList.add("disableActions"); 

    } 

    wireActionButtonEvents.call(this); 

}; 

 

/** 

 * Default Uploader Default Component 

 */ 

@Component({ 

    selector: "app-root", 

    templateUrl: "app.component.html", 

    styleUrls: ["app.component.css"], 

    encapsulation: ViewEncapsulation.None 

}) 

export class AppComponent { 

    @ViewChild("defaultupload") 

    public uploadObj: UploaderComponent; 

    public selectedVar: boolean = true; 

    public extentions: string = ".pdf" 

 

    public uploadType: boolean = false; 

    public uploadEle: HTMLElement = createElement('span', { className: 'upload e-icons', innerHTML : 'Upload All' }); 

 

    public clearEle = createElement("span", { 

        className: "remove e-icons", 

        innerHTML: "Clear All" 

    }); 

    public buttons: Object = { 

        browse: "Choose file", 

        clear: this.clearEle, 

        upload: this.uploadEle 

    }; 

 

    public path: Object = { 

        saveUrl: "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save", 

        removeUrl: "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove" 

    }; 

 

    public dropElement: HTMLElement = document.getElementsByClassName( 

        "control-fluid" 

    )[0] as HTMLElement; 

 

    public onFileRemove(args: RemovingEventArgs): void { 

        args.postRawFile = false; 

        debugger 

        var filesdataCopy = this.uploadObj.filesData.slice(); 

        var allowupload = true; 

        for (var i = 0; i < filesdataCopy.length; i++) { 

 

            if (filesdataCopy[i].name !== args.filesData[0].name && filesdataCopy[i].status !== "Ready to upload") { 

                allowupload = false; 

            } 

        } 

        if (!allowupload) { 

            (this.uploadObj as any).uploadButton.classList.add("e-disabled"); 

            (this.uploadObj as any).uploadButton.classList.add("disableActions"); 

        } else { 

            (this.uploadObj as any).uploadButton.classList.remove("e-disabled"); 

            (this.uploadObj as any).uploadButton.classList.remove("disableActions"); 

        } 

 

    } 

 

    constructor() { 

    } 

} 

 

[component.css] 

.disableActions { 

  pointer-events: none; 

} 

 

 

We have prepared the sample based on your requirement. please find the sample here: https://stackblitz.com/edit/angular-uncbdh-99xu9k?file=app.component.css  

 

Query 2: how to use args.isModified = true in RemovingEventArgs 

 

Answer:  

          We have no support for args.isModified as RemovingEventArgs. We have only in the selectedEventArgs 

 

To know more abour remove and select event arguments, please refer the API documentation links. 

 

Remove: https://ej2.syncfusion.com/angular/documentation/api/uploader/removingEventArgs/  

 

Selected: https://ej2.syncfusion.com/angular/documentation/api/uploader/selectedEventArgs/  

 

Regards, 

Sureshkumar P