54

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):

enter image description here

I'd like the preview display to be shown like this: enter image description here

95
+100

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.

  • 1
    Thanks for the bit about delegate(), very useful knowledge! – Johnathan Elmore May 17 '12 at 17:18
  • @Clive really cool! Will you consider releasing this as a sandbox? If not, mind if I do? – Letharion May 17 '12 at 17:23
  • 4
    I would upvote again if I could ;) To prevent needless duplication of effort, I just want to point out that there is also Ajax, and Ajax submit for any form, both of which are some what related. – Letharion May 17 '12 at 18:43
  • 1
    @Clive The code works perfectly if I have jQuery Update module installed (even with the jQuery version set to 1.7 but still with 'delegate' instead of 'on'). However, if I disable jQuery Update module then the automated upload starts but doesn't finish, it goes into an endless upload process. Can you confirm that jQuery Update is required? – deinqwertz Jul 9 '13 at 21:43
  • 1
    @deinqwertz Shouldn't be, delegate() was added in 1.4.2 and Drupal 7 ships with 1.4.4. I'm pretty sure I have this working fine on a couple of old sites with the stock jQuery installed – Clive Jul 9 '13 at 22:22
13

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

9

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

  • Unfortunately, I don't know how to use jQuery. Is there another way to do this? – Patrick Kenny May 16 '12 at 11:00
  • @PatrickKenny, see my edit. I am unfamiliar about any Drupal way to achieve this. – niksmac May 16 '12 at 12:30
  • 1
    You should replace the $ with jQuery... see Clive's answer below, or just modify the above like this: drupal_add_js("jQuery(document).ready(function() { jQuery('.form-file').change( function() { jQuery(this).next('.ahah-processed').click(); }); });", 'inline'); – Johnathan Elmore May 17 '12 at 17:07
  • 1
    @JohnathanElmore, yeah it will not work in D7. Edited – niksmac May 18 '12 at 2:15
  • 1
    @NikhilMohan There are couple of other problems: .ahah-processed is a Drupal 6 class name, and the click() method doesn't actually invoke a click on those buttons for some reason; you need to use mousedown() instead :) – Clive May 18 '12 at 10:26
5

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);
4

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.

3

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);
  • In my case, it caused the form to send AJAX requests for the file fields constantly in background. Plus, it shows a loading throbber on an empty field. – Елин Й. Feb 20 '13 at 13:20

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.