How to override Drupal behaviors?

Question

I want to override the drupal core behavior Drupal.behaviors.filePreviewLinks which is located at core\modules\file\file.js from my custom module

I tried placing the following code in js file of my custom module

Drupal.behaviors.filePreviewLinks = {
    attach: function (context, settings) {
        console.log($(context).find('div.js-form-managed-file .file a'));
        //some custom code
    },
    detach: function (context, settings){
       //some custom code
    }
}; 

But it is not working. What I need to do? How to override Drupal core behavior in custom module?

EDIT

Let me explain my actual question. I am loading a form in page that is created using ECK entity type module. One of a field in form has 'file' as field type. So once I upload a file, it is showing filename with link in a table(I hope it is default drupal feature). I want to remove the file link and show only file name.

Answer 1

I do something similar in the Node Revision Delete module to override the drupal.content_types library doing this:

In the *.libraries.yml file define your library:

content_types:
  version: 1.0.0
  js:
    js/content_types.js: {}
  dependencies:
    - core/jquery
    - core/drupal
    - core/drupal.form

Attack your library where you need it:

  // Element to track the content type.
  $form['workflow']['section']['node_revision_delete_track'] = [
    '#type' => 'checkbox',
    '#title' => t('Limit the amount of revisions for this content type'),
    '#default_value' => $track,
    '#attached' => [
      'library' => [
        'node_revision_delete/content_types',
        'node_revision_delete/admin_settings',
      ],
    ],
  ];

And remove the core library:

/**
 * Implements hook_library_info_alter().
 */
function node_revision_delete_library_info_alter(&$libraries, $extension) {
    unset($libraries['drupal.content_types']);
}

Answer 2

Use libraries-override in your theme's info.yml file

Step 1: Find the library name in core that the JS or CSS file to override belongs to.

For example, it is clear that core\modules\file\file.js belongs to the file module. Review at core/modules/file/file.libraries.yml to find the library name . In the yaml file, the library name is the top-level item in the yaml structure where file.js is defined. In this case drupal.file.

#core/modules/file/file.libraries.yml
drupal.file:
  version: VERSION
  js:
    file.js: {}  #### Drupal 8+ defines the js/css to override in libraries.yml
  dependencies:
    - core/jquery
    - core/jquery.once
    - core/drupal
    - core/drupalSettings

Step 2: Find the fully-qualified library name.

The fully-qualified library name is generally prefixed by the module name, in the format <modulename>/<libraryname>. However, some core system libraries don't follow this format, so if unsure of the fully qualified library name, search for instances of the <libraryname> in the core codebase, which may turn up a string with the fully-qualified library name like drupal/<libraryname>.

In this case the fully qualified name is file/drupal.file.

Step 3: Override the file in your theme

In your custom theme's info.yml file add the following lines:

libraries-override:
  file/drupal.file:
    js:
      file.js: js/file.js

If you want to override a core or contrib CSS file, the syntax is similar:

libraries-override:
  filter/caption:
    css:
      theme: # <-- this line must match the definition in libraries.yml
        css/filter.caption.css: css/components/captions.css
#        ^                       ^
#        |                       |
#      File path as defined     File path relative to your
#      in *.libraries.yml       theme's folder.

Step 4: Copy the file into your theme, and modify it to your needs

For the 2 examples given above, you'd place the files.js inside a folder js in your theme, and you'd rename filter.caption.css to captions.css and place it inside the css/components folder of your theme.

Step 5: Clear caches and reload the page.

Use your Web browser's resource inspector to verify the path to the overridden file is coming from your theme folder.

Answer 3

Since Drupal behaviors are really just javascript objects, all you need to do is to ensure that the behavior you're overwriting is loaded before your replacement. So:

my_module.libraries.yml

some_new_lib:
  js:
    my-js-file.js: {}
  dependencies:
    - libary_with/behavior_you_want_to_override
    - core/jquery   # anything else you need

my-js.file

(function ($) {

  Drupal.behaviors.nameOfBehaviorYouWantToOverride = {
    // Your little dash of magic
  }

})(jQuery);