How to override standard js class

How to override js class in frappe>

  1. Created one file attach.js in custom app>
// Define the custom class extending frappe.ui.form.ControlAttach
class CustomControlAttach extends frappe.ui.form.ControlAttach {
    // Override the clear_attachment method
    clear_attachment() {
        console.log("Custom clear_attachment method is loaded and executed"); // Add this line
        let me = this;

        if (this.frm) {
            // Remove the file from the form and refresh
            me.parse_validate_and_set_in_model(null);
            me.refresh();
            me.frm.doc.docstatus == 1 ? me.frm.save("Update") : me.frm.save();
        } else {
            // Handle the case where there's no form context
            this.dataurl = null;
            this.fileobj = null;
            this.set_input(null);
            this.parse_validate_and_set_in_model(null);
            this.refresh();
        }
    }
}

// Ensure to use your custom class in the form instead of the default ControlAttach
frappe.ui.form.ControlAttach = CustomControlAttach;

  1. Created project_name.bundle.js file >
import "./attach.js";
  1. Added in Hooks >
app_include_js = [
        "project_name.bundle.js"
        
    ]

Thanks @NCP for guidance :+1:

3 Likes