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

confirm dialog to remove the files and Edit the Uploaded Files

hello. i use the uploadComponent with react, i have some problems:

1. Add confirm dialog to remove the files

when i implement according to the link below, when i delete the file the pop opens and at the same time the file is delete from the server. I would like to trigger the deletion of the file after clicking on the OK button of the popup


2. Uploader / How To / Open and Edit the Uploaded Files

I would like to have an example that shows Open and Edit the Uploaded Files. by following the link above I can not implement


thank you so much




3 Replies

PO Prince Oliver Syncfusion Team July 18, 2019 08:40 PM

Hi Toko, 

Thank you for contacting us. 

Query 1: when i implement according to the link below, when i delete the file the pop opens and at the same time the file is delete from the server. I would like to trigger the deletion of the file after clicking on the OK button of the popup https://ej2.syncfusion.com/react/documentation/uploader/how-to/add-confirm-dialog-to-remove-the-files/ 

We have confirmed the reported issue “While removing the file, remove request is called without any form data if args.cancel is true in removing event” as a bug in our end. The fix for this issue will be included in our upcoming patch release scheduled on last week of July 2019. You can track the status of the reported issue through the below feedback link. 
 
Query 2: I would like to have an example that shows Open and Edit the Uploaded Files. by following the link above I can not implement 

We have prepared the local sample for “Open and Edit the Uploaded Files” and please find the sample in the below link. 

 
Note: You have to define the request header name in the web.config file to open and edit the file as mentioned in the below code example. 

[web.config] 
<httpProtocol> 
    <customHeaders> 
        <add name="Access-Control-Allow-Headers" 
            value="accept, maxdataserviceversion, origin, x-requested-with, dataserviceversion,content-type, chunk-index, Authorization, filePath" /> 
        <add name="Access-Control-Max-Age" value="104857600" /> 
        <add name="Access-Control-Allow-Origin" value="*" /> 
    </customHeaders> 
</httpProtocol> 

[App.tsx] 
public openFile(args: any, e: any) { 
    if (!e.target.classList.contains('e-file-delete-btn') && !e.target.classList.contains('e-file-remove-btn')) { 
        const ajax = new XMLHttpRequest(); 
        // create new request for open the selected file 
        ajax.open("POST", 'http://localhost:61835/Home/openFile'); 
        const liElements = document.getElementsByClassName('e-upload')[0].querySelectorAll('.e-upload-file-list') as any; 
        for (let i = 0; i < liElements.length; i++) { 
            if (liElements[i].getAttribute('data-file-name') = = = args.file.name) { 
                // Added the file path in header to get it in server side. 
                ajax.setRequestHeader('filePath', liElements[i].getAttribute('file-path').toString()); 
            } 
        } 
        ajax.send(); 
    } 
} 

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

Regards, 
Prince 



TF TOKO FIDELE July 29, 2019 12:57 AM

 Add confirm dialog to remove the files

when i implement according to the link below, when i delete the file the pop opens and at the same time the file is delete from the server. I would like to trigger the deletion of the file after clicking on the OK button of the popup


thank


NP Narayanasamy Panneer Selvam Syncfusion Team July 31, 2019 07:28 PM

Hi TOKO, 
Thanks for your patience. 
We have included fix for the reported issue ‘when i delete the file the pop opens and at the same time the file is delete from the server.’ Kindly upgrade your Syncfusion package reference to latest version. For your convenience we have prepared a sample. 
Regards, 
Narayanasamy P. 


Loader.
Live Chat Icon For mobile
Up arrow icon