Theme file upload form element

Question

I want to theme all the file upload fields on my site but I don't know how to name the template file.

I want to alter the form-element.html.twig file but as I have multiple file fields I don't think that the best way is to create theme files for each field. So I was thinking to create a theme based on the field type. Is that possible?

I used the hook_theme_suggestions_input_alter.

function MY_MODULE_theme_suggestions_input_alter(&$suggestions, array $variables) {
  $element = $variables['element'];
  if (strcmp($element['#type'],'file') == 0) {
    $suggestions[] = 'form-element--file';
  }
}

After clearing the caches seems that doesn't work.

Is this the correct way or is there any other way?

Answer 1

As suggested by Ivan Jaros, you can override input--file.html.twig if you want to use twig templates. Basic input template is as follow:

{#
/**
 * @file
 * Theme override for an 'input' #type form element.
 *
 * Available variables:
 * - attributes: A list of HTML attributes for the input element.
 * - children: Optional additional rendered elements.
 *
 * @see template_preprocess_input()
 */
#}
<input{{ attributes }} />{{ children }}

If you need to add more dynamic variables, you can use template_preprocess_input() preprocess function.

Also, you can use debug: true under twig.config in services.yml. This will help for theme-related development.

Note: Drupal provides default classes that are from generic to specific to the field. If generic classes helps to theme, I would suggest to avoid all the above.