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?


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.

  • Not enough info here. Are you attaching this file to the page?
    – Kevin
    Commented Apr 6, 2018 at 0:18
  • delete Drupal.behaviors.filePreviewLinks.attach; Drupal.behaviors.filePreviewLinks.detach; in your own library loaded afterwards.
    – user21641
    Commented Apr 6, 2018 at 12:18

3 Answers 3


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:

  version: 1.0.0
    js/content_types.js: {}
    - 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' => [

And remove the core library:

 * Implements hook_library_info_alter().
function node_revision_delete_library_info_alter(&$libraries, $extension) {
  • This helps to override entire library file. It is working fine and I up-voted for this. Thanks. But, is it possible to override only particular behavior instead of entire library?
    – siddiq
    Commented Apr 10, 2018 at 3:36
  • @siddiq I don't know (is the first time that I see a problem like this), but you can duplicate the file and rewrite the function that you need to change. Commented Apr 10, 2018 at 13:37

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.

  version: VERSION
    file.js: {}  #### Drupal 8+ defines the js/css to override in libraries.yml
    - 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:

      file.js: js/file.js

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

      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.


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-js-file.js: {}
    - libary_with/behavior_you_want_to_override
    - core/jquery   # anything else you need


(function ($) {

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


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.