Hi folks,

I want to upload image when user selects image file from file chooser dialog box, rather than clicking the upload button.
as soon as user clicks on some file , it should immediately starts uploading the image that user has selected, rather than waiting for user to click upload button or submit the form.

can u please tell me how to accomplish this feature in imageField module.
I will really appreciate any help on this,
thanx in advance.



alippai’s picture


alippai’s picture

Version:5.x-1.1» 6.x-3.x-dev

features - IMHO to dev version

dopry’s picture

a little jquery can be used to click the button when the input[@file] changes... I'll think about it in head...

jpetso’s picture

Priority:Critical» Normal

not critical.

quicksketch’s picture

I implemented this for testing in HEAD version of FileField, but I found that it was a little jarring to have the upload immediately begin, especially with very large files.

You can easily add this to your own site though, adding this bit of JS.

$('.filefield-upload input.form-file').change(function() {

You can just add this to filefield.js, but really I'd suggest putting it in your own theme or module JS files. Note this particular JS will only work on the latest dev versions.

quicksketch’s picture

Title:Uploading image when user selects file from file dialog rather than clicking upload button» Auto-upload File on Selection
SB’s picture

This would be a nice option.

edex13’s picture

is there a way to make this code work for D5?

macrodesign’s picture


quicksketch’s picture

Project:ImageField» FileField

Let's move to FileField, since that's where this would be implemented.

Flying Drupalist’s picture

Thanks, subscribe

Flying Drupalist’s picture

Status:Closed (won't fix)» Active
frankcarey’s picture

quicksketch, how about this a configurable option?

martin_q’s picture

Seconding #13.

Presumably it is now appropriate to also request this as a feature for the managed-file form element in D7 core?

I agree that it is a matter of taste whether this is a good thing or not, but as soon as you have a big player like gmail doing it the other way (no upload button), your way starts to look counter-intuitive.

If the mod to the javascript is that short, then it can't be that hard to include this as a '#' option in the form API and thus leave the decision to the individual developers - and see if a consensus develops, or not... :)

quicksketch’s picture

Status:Active» Closed (won't fix)

This will not be added in FileField, which is essentially discontinued now that it has been merged into Drupal core. I'd suggest an add-on module, or like I said above in #5, adding this is as simple as a single line of jQuery.

igorik’s picture

Status:Active» Closed (won't fix)

Thanks quicksketch, your javascript works for me. I added hiding "Add" button too, because it has no sense to have it there if we upload image immediately on change of file upload form file.

This is my code in script.js in my theme

$(document).ready(function() {
    $('.filefield-upload input.form-submit').css("visibility", "hidden");
    $('.filefield-upload input.form-file').change(function() { 
sbefort’s picture

This works initially, but if the user selects the "remove" button after the file is uploaded, the upload button will reappear.

fxmasa’s picture


doesnt work for me. I placed it to script.js in my theme (cleared cache of course), then also i tried to place it to filefield.js and nothing...

maybe beacuse i have jquery 1.3.2??

anybody knows?

fxmasa’s picture

i have the latest version {dev} of filefield. i tried also the latest stable...

entrigan’s picture

This code works for me until I have multiple file fields, at which point it duplicates the number of submits every new upload.

anglo’s picture

With multiple file fields submits are duplicated. Do you have the working javascript for multiple file fields?

tlaurent’s picture

I'm not a Drupal expert and even less a jQuery one, but I think this modified version of igorik script should do the trick (should solve issue with remove/add file and multiple file fields):

(function ($) {
Drupal.behaviors.auto_upload = function(context) {
$('.filefield-upload input.form-submit').css("display", "none");
$('.filefield-upload input.form-file:not(.auto_upload-processed)', context).addClass('auto_upload-processed').change(function() {
Andry Sobolev’s picture


nevets’s picture

The uploadify module provides this functionality

Andry Sobolev’s picture

#22 works for me

gregoiresan’s picture

#22 works perfect

FYI : I am using jQuery_update module. To make the code working, I had to copy it in the FileField.js file.

gregoiresan’s picture

Status:Closed (won't fix)» Fixed

I guess the issue is closed then.

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

geoffv’s picture

Can someone assist me with implementing this change.
I need to make sure that the upload happens after browse.

Instructions here are saying, just put the code in your filefield.js
I have copied the code to the bottom of the filefiled.js file, and it has not made any change.

geoffv’s picture

all good, I figured it out.

cwithout’s picture

Apologies for commenting an old issue. I just want to make it easy for anyone who's still looking for this functionality.

Check out the AutoUpload module. It handles auto upload on D6 FileField and D7 core managed file fields and one-click upload/select to the Media module's library.