1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Intercept Delete File Warning?

Intercept Delete File Warning?

Hello,

When a user deletes a file using the context menu, we are using the menuClick event to test if the file being deleted is referenced in other tables in our system.  If those references are found, we would like to prevent the message "Are you sure you want to delete this file?" from displaying, and perhaps display a different warning.

Is is possible in FileManager to suppress this message?

Thank you,
Randy Craven

9 Replies 1 reply marked as answer
SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team October 6, 2020 10:59 AM UTC

Hi Randy, 
 
Greetings from Syncfusion support. 
 
We have checked your expected requirement with File Manager component. In FileManager, component, for all the file operations request from client-side will be send to server method to perform file operation in the loaded file system. 
 
Whenever you perform delete operation, request from client to server method (Delete) will be send. So, in server side Delete method, you can validate the whether the file which is going to be deleted has references in other tables and based on that you can prevent deleting the file and send back warning message to be displayed in the FileManager dialog window. 
 
[PhysicalFileProvider.cs] 
  public virtual FileManagerResponse Delete(string path, string[] names, params FileManagerDirectoryContent[] data) 
        { 
            FileManagerResponse DeleteResponse = new FileManagerResponse(); 
 
            //we have added the below condition just for your reference to meet your requirement, you can validate whether file to be deleted has reference 
            //in other tables from this method and return error message as like below                 
                ErrorDetails er = new ErrorDetails(); 
                er.Code = "400"; 
                er.Message = "File to be deleted has references in other tables"; 
                DeleteResponse.Error = er; 
                return DeleteResponse; 
 
We have attached the video footage of the above solution for your reference. Please, download it from the below link. 
 
 
Download the demo customized service application for this requirement from the below link and run the application. 
 
 
After running the service application, check the solution from the following live sample. 
 
 
Please, let us know if you need any further assistance. 
 
Regards, 
Shameer Ali Baig S. 


RC Randy Craven October 6, 2020 02:55 PM UTC

Hello,

Thank you for your response.

In studying your example, the message "Are you sure you want to delete this file?" appears when the user selects "delete" from the context menu.  We would prefer to suppress this message if possible.

Can this be done (suppressing the message "are you sure you want to delete this file")?  Or is it hard coded and cannot be suppressed?

Thank you,
Randy Craven

MK Muthukrishnan Kandasamy Syncfusion Team October 7, 2020 01:41 PM UTC

 
Hi Randy, 
 
Thanks for the update. 
 
We have validated your requirement in File Manager component. Yes, we can modify the default warning message. We can also, change this message based on the culture, please refer to the below code block. 
 
L10n.load({ 
    'en-US': { 
        'filemanager': { 
          "Content-Delete": "want to delete ?", 
        } 
    } 
}); 
 
 
Please refer to the below documentation link for more details. 
 
 
We have modified the previously shared sample, please refer to the below link for the sample. 
 
 
Please check out the output screenshot of the shared sample. 
 
 
 
 
Note: Use the same service which is we have shared on the previous update. 
 
Could you please confirm whether your requirement is to remove the delete dialog or to change the warning message alone? 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 


RC Randy Craven October 7, 2020 07:52 PM UTC

Hello,

Thank you for this information.

Our preference would be to have one of two outcomes.

1 - we use our own workflow to do reference checking and deletions and the delete file warning is not displayed.

2 - The delete file warning is displayed, and, if the user selects yes, our own workflow for reference checking and deletions is used. In other words, we would bypass the call to the FileManagement/Delete method.

Thank you,



SP Sowmiya Padmanaban Syncfusion Team October 8, 2020 12:36 PM UTC

Hi Randy Craven,  
 
Query 1: we use our own workflow to do reference checking and deletions and the delete file warning is not displayed. 
 
You can prevent the FileManager delete operations by setting args.cancel as true in beforePopupOpen event. Using that event, you can perform your own customer operations for delete functionality and show the alert message based on your requirement.  

    let fileObject: FileManager = new FileManager({ 
        ajaxSettings: { 
            url: hostUrl + 'api/FileManager/FileOperations', 
            getImageUrl: hostUrl + 'api/FileManager/GetImage', 
            uploadUrl: hostUrl + 'api/FileManager/Upload', 
            downloadUrl: hostUrl + 'api/FileManager/Download' 
        }, 
        view: 'Details', 
        beforePopupOpen: beforepopup 
    }); 
    fileObject.appendTo('#filemanager'); 
 
    function beforepopup(args){ 
      if(args.popupName == "Delete") { 
        //Prevent the delete operation/ 
        args.cancel = true; 
        // you can perform your custom request here. 
      } 
    } 

Refer the below sample link. 
 
 
Query 2: The delete file warning is displayed, and, if the user selects yes, our own workflow for reference checking and deletions is used. In other words, we would bypass the call to the FileManagement/Delete method. 
 
We have already provided you the solution to customize the server side delete operation. Please, check the solutions provided in our first solution update to achieve this requirement. 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


RC Randy Craven October 8, 2020 06:02 PM UTC

Hello, and thank you for this information.

I see how we can use the beforePopupOpen event to suppress the message.

If we did show the dialog ("Are you sure you want to delete this file?") , is there a way we can determine which button the user clicked (Yes or No)?

Thank you,
Randy Craven

SP Sowmiya Padmanaban Syncfusion Team October 9, 2020 10:44 AM UTC

Hi Randy Craven,   
 
As you request to perform customer delete operation, we suggested you the option to perform custom delete functionality by preventing the delete functionality of FileManager component. So, we have suggested the beforePopupOpen event to prevent the default delete functionality of FileManager component. 
 
In FileManager delete functionality, we have added the code in our source level to perform the action for yes and no button in Dialog component. 
 
However, using that event, you can create a your own custom dialog as per your requirement and send the request to the server side based on clicking the yes button in the Dialog component. 
 
For your reference, we have created a custom dialog for Delete function. In which we had added yes button. By clicking it, you can perform any operations based on your requirement. 
 
Refer the below code snippet. 
 
 function beforepopup(args){ 
      if(args.popupName == "Delete") { 
        //Prevent the delete operation/ 
        args.cancel = true; 
        //Display the custom dialog 
         dialog.show(); 
 
//custom dialog code 
let dialog = new Dialog({ 
    // Enables the footer buttons 
    buttons: [ 
        { 
            // Click the footer buttons to hide the Dialog 
            'click': () => {  
               // you can perform your request send operations here. 
              dialog.hide();}, 
            // Accessing button component properties by buttonModel property 
            buttonModel: { 
                //Enables the primary button 
                isPrimary: true, 
                content: 'OK' 
            } 
        }, 
        { 
            'click': () => { dialog.hide(); }, 
            buttonModel: { 
                content: 'Cancel', 
                cssClass: 'e-flat' 
            } 
        } 
    ], 
    // Enables the header 
    header: 'Dialog', 
    // Dialog content 
    content: 'Are you sure want to delete this file?', 
    // The Dialog shows within the target element 
    target: "#filemanager", 
    // Dialog width 
    width: '250px', 
    visible:false 
}); 
// Render initialized Dialog 
dialog.appendTo('#dialog'); 
 
      } 
    } 
 
Refer the sample link below. 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Marked as answer
RC Randy Craven October 13, 2020 06:48 PM UTC

Hello,

This solution was exactly what we needed.

Thank you very much,
Randy Craven

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team October 14, 2020 04:10 AM UTC

Hi Randy, 
 
We are happy to hear that you expected requirement is achieved. Please, let us know if you need any further assistance. 
 
We will be happy to assist you. 
 
Regards, 
Shameer Ali Baig S. 


Loader.
Up arrow icon