1

Drupal 8 supports multiple file upload, however the native interface requires three steps:

  1. Select one or more files
  2. Click Upload
  3. 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):

<html>
<body>
<?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 => $all )
    {
        foreach( $all as $i => $val )
        {
            $new[$i][$key] = $val;
        }
    }
    return $new;
}

if ( ! empty( $_FILES['data_fs_uploads'] ) )
{
    $files = rearrange( $_FILES['data_fs_uploads'] );
    print '<p>Copying uploaded files...</p>';
    foreach ( $files as &$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 '<p>Copied ' . $file['name'] . '</p>';
        }
        else
        {
            print '<p>FAILED to copy ' . $file['name'] . '</p>';
        }
    }
}
?>

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

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

</body>
</html>
  • Not sure if I understood your Q correctly, seems to me that you're asking this How can I automatically upload images on file selection rather than pressing the upload button? if true, as you can see, you can easily solve this with a little jQuery "magic". – No Sssweat Jul 10 '16 at 4:51
  • Yes you got the Q right. The drupal 7 tricks you pointed no longer apply to drupal 8. So we need a Drupal 8 solution. Moreover in Drupal 7 files were always tied to nodes which eventually required saving the node with another click, this is no longer the case with Drupal 8 as the files can be independent of nodes, so with Drupal 8 we are interested in combining all three steps into one. – amit Jul 11 '16 at 17:48
1

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(&$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("<img src='/modules/upload_autosave/images/loading.gif'>");
        $('#edit-actions').fadeOut(1000);
      }); 
     }
    }
  };
})(jQuery);
  • Thanks for the module, it works for new content, but fails (goes into infinite loop) when editing and adding more files. Specifically it fails when there are existing files and then trying to add more files via edit. – amit Jul 12 '16 at 19:50
  • @amit ugh... that was unexpected, I'll look into it. – No Sssweat Jul 12 '16 at 23:48
  • @amit ok fixed. – No Sssweat Jul 13 '16 at 1:04
  • Fantastic, that works. I highly recommend and encourage you to submit this as contributed module to Drupal. If I may offer a suggestion, replace gif with built in progress bar. – amit Jul 13 '16 at 17:55
  • link is dead @NoSssweat – Nitesh Mishra Mar 20 '17 at 5:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.