Tell me more ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.
up vote 21 down vote favorite
12

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

share|improve this question

5 Answers

up vote 44 down vote accepted
+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.

share|improve this answer
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
@Letharion Happy to :) I haven't set up a sandbox account yet but it's about time I did! I'll report back when it's done – Clive♦ May 17 '12 at 17:44
@Letharion I've added the sandbox project, the link's in the question. If you use it and have any feedback that'd be great; if it runs ok in the wild I'll add some more features and request to turn it into a full project :) – Clive♦ May 17 '12 at 18:34
3  
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
show 7 more comments
up vote 6 down vote

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

share|improve this answer
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. – Nikhil M May 16 '12 at 12:30
I added the code you suggested to page.tpl in php tags and cleared the cache twice but when I select an image with Browse the image is not automatically uploaded; it still is the same as before. When I check the source of the page, the code has been added within <script> tags. – Patrick Kenny May 17 '12 at 16:26
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
@JohnathanElmore, yeah it will not work in D7. Edited – Nikhil M May 18 '12 at 2:15
show 2 more comments
up vote 2 down vote

Take a look at the Plupload integration module.

share|improve this answer
up vote 0 down vote

If you use file upload field on AJAX form - after its submitting you may loose auto-upload functionality (see http://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);
share|improve this answer
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 at 13:20
up vote 0 down vote

You can achieve it using on() method as delegate() is now obsolete.

(function ($) {
  Drupal.behaviors.autoUpload = {
    attach: function (context, settings) {
      $('form', context).on('change', 'input.form-file', function() {  
        $(this).next('input[type="submit"]').mousedown();
      }); 
    }
  };
})(jQuery);
share|improve this answer
You're right, I see now your answer contains already the alternative to on(). – Jacques Brel Jan 22 at 8:16

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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