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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Deleting a file from a button

Thread ID:

Created:

Updated:

Platform:

Replies:

148841 Nov 6,2019 08:45 AM UTC Nov 7,2019 06:04 AM UTC React - EJ 2 1
loading
Tags: Uploader
TOKO FIDELE
Asked On November 6, 2019 08:45 AM UTC

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 [Syncfusion]
Replied On November 7, 2019 06:04 AM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon