How to alter file upload description text

Question

I'm trying to customize text for a file upload widget in Drupal 8.

Here is a screenshot of the widget:

I just want to display the first 15 MB which I added as file field description text in the content type.

The trouble is the last 3 lines of text have no HTML tags so I can't selectively hide it with display:none;. Here is what I mean:

I tried this CSS but it doesn't work:

#edit-field-dataset-file-0--description * {
    display:none;
}

#edit-field-dataset-file-0--description p {
    display:inline !important;
}

Does anyone have any suggestions?

Answer 1

I used hook_field_widget_form_alter as suggested by DannyEnglander and leymannx.

8.8.x hook_field_widget_form_alter

Replace MYMODULE with your custom module's name and alter the element array to suit your needs.

/**
 * Implements hook_field_widget_form_alter().
 */
function MYMODULE_field_widget_form_alter(&$element, \Drupal\Core\Form\FormStateInterface $form_state, $context) {
  if (get_class($context['widget']) === 'Drupal\file\Plugin\Field\FieldWidget\FileWidget' && !empty($context['form']['#attributes'])) {
    $element['#description'] = '<p>File must be less than <strong>15 MB</strong>.<br/>Allowed types: <code>txt csv tsv xls xlsx sav sas7bdat</code></p>';
  }
}

Answer 2

You can add a preprocess function like this:

function theme_preprocess_file_upload_help(array &$variables) {
  $description = $variables['descriptions']; // It's where the three objects are, you can manipulate the description.
}

Or if you want just to add some wrappers around each element, modify the template file-upload-help.html.twig. Currently it looks like this:

{#
/**
 * @file
 * Theme override to display help text for file fields.
 *
 * Available variables:
 * - descriptions: Lines of help text for uploading a file.
 *
 * @see template_preprocess_file_upload_help()
 */
#}
{{ descriptions|safe_join('<br />') }}

Instead you can do:

{% for item in descriptions %}
  <div class="help-text-item">
    {{ item }}
  </div>
{% endfor %}

Answer 3

If altering the file field widget description in hook_field_widget_form_alter() doesn't work.

You can try to add a process function to change the description like it is mentioned by gnuget in this Drupal issue :

/**
 * Implements hook_field_widget_form_alter().
 */
function HOOK_field_widget_form_alter(&$element, FormStateInterface &$form_state, $context) {
  if (isset($element['#field_name']) && $element['#field_name'] == 'field_media_image') {
      // Add process callback to change field description.
      $element['#process'][] = '_change_description';
    }
  }
}

/**
 *  The description field is build in a #process callback so we need to add another callback.
 */
function _change_description($element, FormStateInterface $form_state, $form) {
  $element['#description'] = t('Your new description');
  return $element;
}