How to add image field in a custom module form?

Question

In our custom module, mymodule we have a form MyModuleForm where we want to allow for an image to be uploaded or chosen from already uploaded images. Below is the MyModuleForm.php file, but cannot figure out why we are not able to upload the Image and save it. There is a menu link where the module's form is and when we navigate to the page we see a blank page with no field or widget to set the image.

Goal

1. To be able to make the Image Browser widget display so that we can use an existing image or upload one.
2. Store the image using MyModuleForm from the custom module.
3. We should be able to change the image as needed and save the configuration.
4. Set file status to permanent.
5. Add to file usage calculation.

How do we add an Image field on our MyModuleForm so that we can either use an existing image or upload a new one?

Here is what we tried but didn't work

MyModuleForm.php

class MyModuleForm extends ConfigFormBase {
  protected function getEditableConfigNames() {
    return [
      'mymodule.settings'
    ];
  }

  public function getFormId() {
    return 'mymodule_form';
  }

  public function buildForm(array $form, FormStateInterface $form_state) {
    $config = $this->config('mymodule.settings');
    $form['my_file'] = [
      '#type' => 'managed_file',
      '#title' => 'my file',
      '#name' => 'my_custom_file',
      '#description' => $this->t('my file description'),
      '#default_value' => $config->get('my_file'),
      '#upload_location' => 'public://'
    ];

    return parent::buildForm($form, $form_state);
  }

  public function validateForm(array &$form, FormStateInterface $form_state) {
    parent::validateForm($form, $form_state);
  }

  public function submitForm(array &$form, FormStateInterface $form_state) {
    // Check if image is uploaded.
    if(isset($form_state['default_press_release_image'])) {
      // Set file status to permanent.
      $image = $form_state->getValue('my_file');
      $file = File::load($image[0]);
      $file->setPermanent();
      $file->save();
      // Add to file usage calculation.
      \Drupal::service('file.usage')->add;
    }

    $this->config('ns_default_images.settings')
      ->set('default_press_release_image', $form_state->getValue('default_press_release_image'))
      ->save();

    parent::submitForm($form, $form_state);
  }
}

Answer 1

The default_value attribute accept an array in case of managed_file:

  $form['my_file'] = [
      '#type' => 'managed_file',
      '#title' => 'my file',
      '#name' => 'my_custom_file',
      '#description' => $this->t('my file description'),
      '#default_value' => [$config->get('my_file')],
      '#upload_location' => 'public://'
    ];

In The submit function you are using a field name different from the declared one in the buildForm().

The value of a managed_file should be an array even when the field is not multiple:

$form_state->getValue('default_press_release_image')[0];