Template in Angular Uploader component

[Sandip Kumar]

Hi,

How can use ng-template in fileupload? Please provide me a details of ng-template in fileupload.

Regards,

Sandip Kumar

[Berly Christopher]

Hi Sandip, 

  

Greetings from Syncfusion support.  

  

You can use the Uploader component with ng-template as mentioned in the below documentation.  

  

UG Link: https://ej2.syncfusion.com/angular/documentation/uploader/template/#file-list-template  

  

To know more about template option, please refer the below demo link. 

  

Demo Link: https://ej2.syncfusion.com/angular/demos/#/material/uploader/custom-file-list  

  

Regards, 

Berly B.C 

[Sandip Kumar]

hi

How can I solve this problem (Property 'uploadWrapper' is private and only accessible within class 'Uploader'.)?

I am not able to build project to production mode due to this error.

Attachment: Untitled_d6222e99.zip

[Prince Oliver]

Hello Sandip, 

 

This is a typing error and occurs due to accessing the private member of the UploaderComponent. We can resolve this error by casting the uploader instance as any type. Kindly refer to the following code snippet. 

 

  public onFileUpload(args: any) { 

    let li: HTMLElement = (this.uploadObj as any).uploadWrapper.querySelector('[data-file-name="' + args.file.name + '"]'); 

    let progressValue: number = Math.round((args.e.loaded / args.e.total) * 100); 

    li.getElementsByTagName('progress')[0].value = progressValue; 

    li.getElementsByClassName('percent')[0].textContent = progressValue.toString() + " %"; 

  } 

  public onuploadSuccess(args: any) { 

    if (args.operation === 'remove') { 

      let height: string = document.getElementById('dropArea').style.height; 

      height = (parseInt(height) - 40) + 'px'; 

      document.getElementById('dropArea').style.height = height; 

    } else { 

      let li: HTMLElement = (this.uploadObj as any).uploadWrapper.querySelector('[data-file-name="' + args.file.name + '"]'); 

      let progressBar: HTMLElement = li.getElementsByTagName('progress')[0]; 

      progressBar.classList.add('e-upload-success'); 

      li.getElementsByClassName('percent')[0].classList.add('e-upload-success'); 

      let height: string = document.getElementById('dropArea').style.height; 

      document.getElementById('dropArea').style.height = parseInt(height) - 15 + 'px'; 

    } 

 

 

Let us know if you need any further assistance on this. 

Regards, 

Prince