How can I stop auto uploading of managed_file elements?

Question

I am trying to create a field to upload the xml format of site map. But when I add a file to my filed it automatically uploaded and saved in the S3 bucket before I click on the submit button.

The issue is when someone added a xml file to that field and then closes the tab without submitting the form. The xml file is already uploaded to S3 bucket that way.

I need a way to manually upload this. I need to upload the image only after I pressed the submit button in the form. Without uploading the xml file automatically when selecting.

This is my buildForm() function.

public function buildForm(array $form, FormStateInterface $form_state) {

  $form['sitemap'] = [
    '#type'              => 'managed_file',
    '#name'              => 'sitemap',
    '#title'             => t('Upload Site Map (xml)'),
    '#upload_location'   => 's3://private/sitemap',
    '#field_suffix'      => 'XML format supported',
    '#upload_validators' => [
      'file_validate_extensions' => ['xml'],
    ],
    '#required'          => TRUE,
    '#validated'         => TRUE,
  ];

  $form['submit'] = [
    '#type'       => 'submit',
    '#value'      => t('Save configuration'),
    '#attributes' => [],
    '#validated'  => TRUE,
  ];

  return $form;
}

Answer 1

Try overriding the #attached library on the managed file field:

$form['sitemap'] = [
'#type'              => 'managed_file',
'#name'              => 'sitemap',
'#title'             => t('Upload Site Map (xml)'),
'#upload_location'   => 's3://private/sitemap',
'#field_suffix'      => 'XML format supported',
'#upload_validators' => [
  'file_validate_extensions' => ['xml'],
],
'#required'          => TRUE,
'#validated'         => TRUE,
'#attached'          => [
   'library' => [],
 ]  

];

Answer 2

I have stopped the managed_file auto uploading this way. This is like a workaround. But this works. You better put this in the $(document).ready in the js file.

(function($) {
    $(document).ready(function() {
        /*Drupal has a hidden submit button for upload the file 
          automatically. This will remove the button so Drupal won't auto upload for the given managed_file field*/
        $("input[name*='name_of_the_button']").remove();
    });
}(jQuery));

note - make sure you find the correct button. This is not your upload file button. This is the button that drupal creates automatically to do the file upload. This button is not visible in the page. So you need to go the inspect element and find this button. The button has the class js-hide button js-form-submit form-submit. So you won't miss !