Deleting a file from a button

[TOKO FIDELE]

Hello.

 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.

[Sureshkumar P]

Hi TOKO, 

 

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' } })); 

    liEle.appendChild(this.progressbarContainer); 

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

liEle.appendChild(closeIconContainer); 

document.querySelector('.ul-element').appendChild(liEle); 

this.filesList.push(liEle); 

} 

 

 

private removeFiles(args: any): void { 

    let status: string = this.filesDetails[this.filesList.indexOf(args.currentTarget.parentElement)].statusCode; 

    if(status === '2') { 

    this.uploadObj.remove(this.filesDetails[this.filesList.indexOf(args.currentTarget.parentElement)]); 

} else { 

    detach(args.currentTarget.parentElement); 

} 

} 

 

 

 

Sample browser sample link: https://ej2.syncfusion.com/react/demos/#/material/uploader/custom-file-list  

 

To know more about our API, Methods and Events please refer the documentation link: https://ej2.syncfusion.com/react/documentation/api/uploader  

 

Regards, 

Sureshkumar P