[Question] Formio File Component functionality need to override

[swapnil147]

Hi, I am trying to override the formio File Component functionality. Whenever a user tries to remove the uploaded file a confirmation popup should display and if the user confirms the uploaded file should remove. ( looks like right now we don't have this functionality in formio)

I have gone through various blogs and formio documents. I has followed checkmatrix example to create a custom component and override the deleteFile(fileInfo) method functionality of formio File.js

Below is the code I have tried so far.

import { Formio } from "formiojs";
const FileComponent = (Formio as any).Components.components.file;
export default class CustomFileComponent extends FileComponent {
    constructor(component, options, data) {
        super(component, options, data);
     }
    init(){
        super.init();
    }
    render(content) {
        return super.render(content);
    }
    static get builderInfo() {
      return {
         title: 'My File Upload',
         group: 'basic',
         icon: 'fa fa-bath',
         weight: 0,
         schema: CustomFileComponent.schema()
        };
      }
   attach(element) {
    return super.attach(element);
  }
  deleteFile(fileInfo) {
     console.log('fileInfo');
     return super.deleteFile(fileInfo);
  }
}

I am able to drag and drop My File Upload in the form builder and generate the form however except builderInfo() method non of the custom method is being invoked.

I tried looking for callback methods if any but didn't find anything. Looking for a solution where I can invoke the custom functionally if the user is trying to remove the uploaded file.

I have registered the component as Components.addComponent('CustomFileComponent',CustomFileComponent); in app.component.ts

We are using angular (12.0.2) and formiojs (4.12.0)

Thank you!!!