By Patrick Kenny


2012-05-15 06:04:15 8 Comments

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

6 comments

@niksmac 2012-05-15 06:50:03

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

@Patrick Kenny 2012-05-16 11:00:43

Unfortunately, I don't know how to use jQuery. Is there another way to do this?

@niksmac 2012-05-16 12:30:09

@PatrickKenny, see my edit. I am unfamiliar about any Drupal way to achieve this.

@Patrick Kenny 2012-05-17 16:26:38

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.

@Johnathan Elmore 2012-05-17 17:07:04

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

@niksmac 2012-05-18 02:15:10

@JohnathanElmore, yeah it will not work in D7. Edited

@Clive 2012-05-18 10:26:34

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

@drupal_stuff_alter 2013-01-21 15:26:48

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

@uwe 2011-09-20 04:54:47

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.

@Cardo 2014-02-03 21:56:21

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

@Clive 2012-05-17 16:47:48

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.

@Johnathan Elmore 2012-05-17 17:18:53

Thanks for the bit about delegate(), very useful knowledge!

@Letharion 2012-05-17 17:23:07

@Clive really cool! Will you consider releasing this as a sandbox? If not, mind if I do?

@Clive 2012-05-17 17:44:41

@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 2012-05-17 18:34:16

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

@Letharion 2012-05-17 18:43:16

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.

@Patrick Kenny 2012-05-17 23:52:16

Thank you, this is a huge help! I never thought the upload button was a problem until I started testing with actual users and the first four were all confused by having an upload and a submit button.

@niksmac 2012-05-18 02:18:39

@Clive, consider making it a live Drupal module move from sandbox. +1

@drupal_stuff_alter 2013-01-22 13:41:06

Unfortunately I cannot make it work for IE8. It only submits after I click once on the blank page

@Clive 2013-01-22 13:53:30

Yeah that's an IE7/8 bug, instructions on how to get around it are here

@drupal_stuff_alter 2013-01-25 10:45:50

Hi Clive, I've tried all kind of workarounds but seems IE7/8 bug persists. Can you give us a solution to this?

@mohit_rocks 2013-07-03 10:16:54

@Clive If i have disabled the upload button using this answer [drupal.stackexchange.com/questions/32358/… then it is not working, and it should not work too..But if i want to make it work with such case also then do i have any other class then submit

@Clive 2013-07-03 10:20:54

Rather than disabling/removing the upload button why not just hide it with CSS? Then it'll still be there and the JS events will fire, but the user won't be able to click it

@deinqwertz 2013-07-09 21:43:37

@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?

@Clive 2013-07-09 22:22:50

@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

@deinqwertz 2013-07-12 17:35:36

@Clive I confirm that the module works as desired, thank you. My theme is getting into conflicts with jQuery and causing the problem.

@Pere 2013-08-06 09:28:14

I've created an issue for making this a Drupal module: drupal.org/node/2057829

@mohit_rocks 2013-08-31 05:35:03

@Clive Can i use the same kind of logic in plupload ? As i am creating auto upload in plupload module. Here is the drupal link drupal.org/node/1804382#comment-7810763

@Eugene Fidelin 2012-07-12 14:36:13

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

@Елин Й. 2013-02-20 13:20:59

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.

Related Questions

Sponsored Content

1 Answered Questions

Image preview thumbnail does not display

  • 2015-01-10 22:02:25
  • user14666
  • 1150 View
  • 2 Score
  • 1 Answer
  • Tags:   7 nodes media

1 Answered Questions

How to execute ajax action after image file upload with media widget?

  • 2017-11-22 10:04:53
  • Maria Ioannidou
  • 375 View
  • 2 Score
  • 1 Answer
  • Tags:   7 forms ajax media

5 Answered Questions

[SOLVED] Removing the upload button in managed files

  • 2012-01-21 11:38:33
  • vishal
  • 12454 View
  • 3 Score
  • 5 Answer
  • Tags:   7 forms

1 Answered Questions

1 Answered Questions

[SOLVED] How to upload multiple images as multiple nodes?

  • 2015-07-28 04:35:29
  • M a m a D
  • 630 View
  • 1 Score
  • 1 Answer
  • Tags:   7 nodes media

3 Answered Questions

1 Answered Questions

[SOLVED] How to automatically upload a file on form submission

  • 2013-03-13 20:11:44
  • user5013
  • 843 View
  • 1 Score
  • 1 Answer
  • Tags:   7 forms

1 Answered Questions

[SOLVED] Drupal 7 admin can't upload images, but all other users can

  • 2012-03-28 00:05:03
  • user1073319
  • 1507 View
  • 1 Score
  • 1 Answer
  • Tags:   7 media files

Sponsored Content