Managed file in theme config not saving

Question

In my theme settings under 'admin/appearance/settings/mytheme' I am trying to add an image field.

I have added the following to mytheme.theme

function mytheme_form_system_theme_settings_alter(&$form, Drupal\Core\Form\FormStateInterface $form_state) {
  $form['mytheme_settings']['footer_info']['footer_image'] = array(
    '#type' => 'managed_file',
    '#title' => 'footer image',
    '#name' => 'footer_file',
    '#default_value' => theme_get_setting('footer_image', 'mytheme'),
    '#upload_location' => 'public://'
  );
}

This creates a file field in the theme settings page. When I upload the field is saved in my public files

I am now trying to render that file in to a twig template.

I add the following to mytheme.theme to delacre the variable

function mytheme_preprocess_page(&$variables) {
  $variables['footer_image'] = theme_get_setting('footer_image','mytheme');
}

Then add {{ footer_image }} to a template, however the file does not get rendered.

How do I call the file I have uploaded in to my custom theme template. Thanks

Edit.

After searching more, I have discovered the file gets uploaded but the file is getting deleted.

After finding this link it is suggested I sent the file location which I already have done.

Answer 1

hook_form_system_theme_settings_alter() needs to also add a submission handler, to handle the managed file. In Drupal core, the only hook doing that is implemented by a test module, but the code is the same that a normal module should use. (I didn't show all the form elements added from the hook; the code comes from test_theme_settings_form_system_theme_settings_submit().)

function test_theme_settings_form_system_theme_settings_alter(&$form, FormStateInterface $form_state) {
  $form['custom_logo'] = [
    '#type' => 'managed_file',
    '#title' => t('Secondary logo.'),
    '#default_value' => theme_get_setting('custom_logo'),
    '#progress_indicator' => 'bar',
    '#progress_message' => t('Please wait...'),
    '#upload_location' => 'public://test',
    '#upload_validators' => [
      'file_validate_extensions' => [
        'gif png jpg jpeg',
      ],
    ],
  ];

  $form['#submit'][] = 'test_theme_settings_form_system_theme_settings_submit';
}

function test_theme_settings_form_system_theme_settings_submit(&$form, FormStateInterface $form_state) {
  if ($file_id = $form_state->getValue(['custom_logo', '0'])) {
    $file = File::load($file_id);
    $file->setPermanent();
    $file->save();
  }
}

Without setting the managed file as permanent, it would be soon deleted.