How to implement one click upload? Drupal 8 supports multiple file upload, however the native interface requires three steps:


Select one or more files 
Click Upload 
Click Save


Ideally this could be simplified to a single step i.e. select one of more files, once done it uploads them. The user can delete a file later if they wish, but no point showing them the list of which they just select, just to make them change their mind. 

How should one click upload for multiple files be implement in Drupal?

In pure PHP this can be done easily as follows (but Drupal 8 adds too many constraints for this to work):

&lt;html&gt;
&lt;body&gt;
&lt;?php

$upload_dir = '/tmp/upload_test';
if ( ! is_dir( $upload_dir ) )
{
    mkdir( $upload_dir, 0777, true );
}

/** Rearrange the "parallel" _FILES array into consolidated file items. */
function rearrange( $arr )
{
    foreach( $arr as $key =&gt; $all )
    {
        foreach( $all as $i =&gt; $val )
        {
            $new[$i][$key] = $val;
        }
    }
    return $new;
}

if ( ! empty( $_FILES['data_fs_uploads'] ) )
{
    $files = rearrange( $_FILES['data_fs_uploads'] );
    print '&lt;p&gt;Copying uploaded files...&lt;/p&gt;';
    foreach ( $files as &amp;$file )
    {
        // File has 'name', mime 'type', 'tmp_name' path, 'error', and 'size'.
        $file['ext'] = pathinfo( $file['name'], PATHINFO_EXTENSION );
        $target_file = $upload_dir . '/' . $file['name'];
        if ( move_uploaded_file( $file["tmp_name"], $target_file ) )
        {
            print '&lt;p&gt;Copied ' . $file['name'] . '&lt;/p&gt;';
        }
        else
        {
            print '&lt;p&gt;FAILED to copy ' . $file['name'] . '&lt;/p&gt;';
        }
    }
}
?&gt;

&lt;form action="upload.php" method="post" enctype="multipart/form-data"&gt;
    &lt;input id="data_fs_uploads" type="file" name="data_fs_uploads[]" multiple="multiple" onchange="javascript:this.form.submit();" /&gt;
&lt;/form&gt;

&lt;?php
foreach ( glob("$upload_dir/*") as $file )
{
    print '&lt;div&gt;' . $file . '&lt;/div&gt;';
}
?&gt;

&lt;/body&gt;
&lt;/html&gt;
Here is how you would create an auto save after selecting an upload file(s) in D8.

upload_autosave.libraries.yml

auto:
  version: 1.0
  js:
    js/auto.js: {}
  dependencies:
      - core/jquery


upload_autosave.module

/**
 * Implements hook_form_alter().
 * Adds JS file to all forms
 */
function upload_autosave_form_alter(&amp;$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
    $form['#attached']['library'][] = 'upload_autosave/auto';
}


/js/auto.js

(function ($) {
  Drupal.behaviors.upload_autosave = {
    attach: function (context, settings) {
    if ($('.image-widget-data').length || $('.field--type-file').length){
      $('.js-hide.button.js-form-submit.form-submit').remove();
      $('form', context).on('change', 'input.form-file', function() {  
        $('#edit-actions .button.js-form-submit.form-submit')[0].click();
        $(".details-wrapper").html("&lt;img src='/modules/upload_autosave/images/loading.gif'&gt;");
        $('#edit-actions').fadeOut(1000);
      }); 
     }
    }
  };
})(jQuery);