We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Deleting a file from a button

 I'm currently working on the UploaderComponent component. In addition to the trash bin on the right of the downloaded file to delete it

I have a button that should allow to delete the file. my problem is that i do not know the function to call to delete the file.

thank you.

1 Reply

SP Sureshkumar P Syncfusion Team November 7, 2019 06:04 AM UTC

Greetings from Syncfusion support. 
Yes, we can delete the selected file with external button element using our inbuild remove method. While analyzing your requirement we suspect that you have additional button element to delete the selected files in the uploader component. We suggest you can refer our template sample in our sample browser. we have formatting the template design and delete the file list using remove method.  
Kindly refer the code block. 
private formSelectedData(selectedFiles : FileInfo, proxy: any): void { 
    let liEle: HTMLElement = createElement('li', { className: 'file-lists', attrs: { 'data-file-name': selectedFiles.name } }); 
    liEle.appendChild(createElement('span', { className: 'file-name ', innerHTML: selectedFiles.name })); 
    liEle.appendChild(createElement('span', { className: 'file-size ', innerHTML: this.uploadObj.bytesToSize(selectedFiles.size) })); 
    if(selectedFiles.statusCode === '1') { 
    this.progressbarContainer = createElement('span', { className: 'progress-bar-container' }); 
    this.progressbarContainer.appendChild(createElement('progress', { className: 'progress', attrs: { value: '0', max: '100' } })); 
else { liEle.querySelector('.file-name').classList.add('upload-fails'); } 
let closeIconContainer: HTMLElement = createElement('span', { className: 'e-icons close-icon-container' }); 
EventHandler.add(closeIconContainer, 'click'this.removeFiles, proxy); 
private removeFiles(args: any): void { 
    let status: string = this.filesDetails[this.filesList.indexOf(args.currentTarget.parentElement)].statusCode; 
    if(status === '2') { 
else { 
To know more about our API, Methods and Events please refer the documentation link: https://ej2.syncfusion.com/react/documentation/api/uploader  
Sureshkumar P 

Live Chat Icon For mobile
Up arrow icon