Deleting file from popup doesn't delete it from the grid

[Mohamed Samir]

Hello,

I uploaded a file to the file manager control. The upload success popup appears and the uploaded file is listed on the popup and gird.  After press delete icon in the popup, the file is deleted from the popup but not from the grid.

Is there any way to delete the file out of the box from the grid or to call an API to delete the file from the grid ?

Thanks

Attachment: ScreenRecord_20241021___file_manager_ae625bc9.rar

[SureshRajan Alagarsamy]

Hi Mohamed,

We have reviewed your query and understand that you want to delete the uploaded file when clicking the delete icon in the upload dialog. To achieve this, we recommend binding the uploader component's "removing" event within the File Manager component's "created" event handler. When the delete icon is clicked, the "removing" event will be triggered. In this event, you should set args.cancel to true to cancel the upload request, and then delete the uploaded file using the "deleteFiles" method, passing the name of the uploaded file.

Refer to the below code snippet for further reference.

[index.js]

var hostUrl = 'http://localhost:62869/';

var fileObject = new ej.filemanager.FileManager({

  ajaxSettings: {

    url: hostUrl + 'api/FileManager/FileOperations',

    getImageUrl: hostUrl + 'api/FileManager/GetImage',

    uploadUrl: hostUrl + 'api/FileManager/Upload',

    downloadUrl: hostUrl + 'api/FileManager/Download',

  },

  .....

  created: OnCreated

});

fileObject.appendTo('#filemanager'); 

function OnCreated(){

    fileObject.uploadObj.removing = function (args){

        args.cancel = true;

        fileObject.deleteFiles([args.filesData[0].name]);    

    }

}

We have also attached a sample for your reference.

File Manager sample: https://stackblitz.com/edit/zu6c8r-vjuc8p?file=index.js

Asp Core File Provider: SyncfusionExamples/ej2-aspcore-file-provider: This repository contains the ASP.NET Core file system providers for the Essential JS 2 File Manager component.

Regards,
Suresh.

[Mohamed Samir]

Thank you so much. you solution works like charm. However, after the file gets deleted from the grid, it doesn't get deleted from the popup.

Attachment: Untitled_video__Made_with_Clipchamp_f1708054.rar

[SureshRajan Alagarsamy]

Hi Mohamed,

We have reviewed your query and understand that you want to delete the file from the upload dialog as well. We would like to clarify that the File Manager's upload functionality aligns with Windows Explorer’s upload functionality; therefore, we haven't provided built-in support to delete files from the upload dialog.

 

However, as a workaround, we suggest utilizing the customFormData argument in the removing event to send the necessary request data to remove the uploaded file from the server. This implementation allows us to remove files from both the File Manager component and the upload dialog.

Refer to the below code snippet for further reference.

[index.js]

function OnCreated() {

  fileObject.uploadObj.removing = function (args) {

    if (args.event != null) {

      args.customFormData = [

        { path: fileObject.path },

        { size: args.filesData.size },

        { action: 'remove' },

        { data: null },

        { filename: args.filesData.name },

      ];

      if (fileObject.uploadObj.fileList.length == 1) {

        fileObject.uploadDialogObj.hide();

      }

    }

  };

}

We have also attached a sample for your reference.

File Manager sample: https://stackblitz.com/edit/zu6c8r-ustjjh?file=index.js

Asp.Net Core File Provider: SyncfusionExamples/ej2-aspcore-file-provider: This repository contains the ASP.NET Core file system providers for the Essential JS 2 File Manager component.

Regards,
Suresh.