How can I automatically upload images on file selection rather than pressing the upload button?

Question

I have a custom content type to allow users to upload images. I'm trying to keep the interface as simple as possible.

The content type contains a single image field. This works, but some users don't understand that the image has been uploaded because they don't see it after selecting (to preview the upload, the upload button must be pressed). Is there a way to skip/automatically press the upload button so that an image is shown immediately after a file is selected?

In other words, immediately after selecting a file, instead of the following picture (where the path is shown but hard to read in Firefox):

I'd like the preview display to be shown like this:

Answer 1

You'd be better off doing this at the module level, rather than the theme level, as the JS will not take effect for admin pages otherwise (unless of course you're using the same theme for both).

Here's a small module to provide this functionality system-wide:

File: auto_upload.info

name = Auto Upload
description = Removes the need for users to press the 'Upload' button for AJAX file uploads.
core = 7.x
dependencies[] = file

File: auto_upload.js:

(function ($) {
  Drupal.behaviors.autoUpload = {
    attach: function (context, settings) {
      $('form', context).delegate('input.form-file', 'change', function() {  
        $(this).next('input[type="submit"]').mousedown();
      }); 
    }
  };
})(jQuery);

File: auto_upload.module

function auto_upload_init() {
  drupal_add_js(drupal_get_path('module', 'auto_upload') . '/auto_upload.js');
}

Once you've installed the module all file inputs that are AJAX-ified (i.e. those that have an 'Update' button) will be affected...you won't need to press the 'Upload' button any more after selecting the file.

By using the delegate() method this will also work perfectly for file fields that allow multiple uploads, and also for fields that are loaded into the page as the result of an AJAX request.

I've tested that in Chrome, Safari and Firefox and it works a treat :)

Footnote: In the (probably very unlikely) event that your site is using jQuery 1.7, you should use the on() method, which has superseeded delegate().

UPDATE I've created a sandbox project for this module.

Answer 2

For anyone under this situation, try using the AutoUpload module.

AutoUpload is a user interface (UI) enhancement that initiates automatic upload of files minimizing the number of clicks required by a user.

Currently, users must select files, then press the "Upload" button. We found users often don't realize a button press is necessary and mistakenly think their image is uploaded when it's not.

It's currently available for D6 and D7

Answer 3

Drupal 6

Try something like this in your jQuery document ready

jQuery('.form-file').change( function() {   
  jQuery(this).next('.ahah-processed').click();
}); 

Paste the following in page.tpl or node.tpl

drupal_add_js("jQuery(document).ready(function() {
  jQuery('.form-file').change( function() { 
    jQuery(this).next('.ahah-processed').click();
  });   
});", 'inline');

I am unfamiliar about any Drupal way to achieve this.

fiddle

Answer 4

You can achieve it using on(). delegate() has been deprecated.

(function ($) {
  Drupal.behaviors.autoUpload = {
    attach: function (context, settings) {
      $('form', context).on('change', 'input.form-file', function() {  
        $(this).next('input[type="submit"]').mousedown();
      }); 
    }
  };
})(jQuery);

Answer 5

Take a look at the Plupload integration module.

Provides integration between for the Plupload widget to upload multiple files and Drupal. Plupload is a GPL licensed multiple file uploading tool that can present widgets in Flash, Gears, HTML 5, Silverlight, BrowserPlus, and HTML4 depending on the capabilities of the client computer.

Answer 6

If you use file upload field on AJAX form - after its submitting you may loose auto-upload functionality (see https://drupal.stackexchange.com/a/31453/7313)

To fix - use this script

(function($) {

Drupal.behaviors.autoUpload = {
  attach: function (context, settings) {
    $('input.form-file', context).once(function() {
      $(this).change(function() {
        $(this).parent().find('input[type="submit"]').mousedown();
      });
    });
  }
};

})(jQuery);