2

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.

  • Not enough info here. Are you attaching this file to the page? – Kevin Apr 6 '18 at 0:18
  • delete Drupal.behaviors.filePreviewLinks.attach; Drupal.behaviors.filePreviewLinks.detach; in your own library loaded afterwards. – user21641 Apr 6 '18 at 12:18
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']);
}
| improve this answer | |
  • 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 Apr 10 '18 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. – Adrian Cid Almaguer Apr 10 '18 at 13:37
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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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