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.

Satya

Comments

+1

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

features - IMHO to dev version

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

Priority:Critical» Normal

not critical.

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() {
  $(this).parent().find('input.form-submit').mousedown();
});

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.

Title:Uploading image when user selects file from file dialog rather than clicking upload buttonAuto-upload File on Selection

This would be a nice option.
+1

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

subscribe

Project:ImageField» FileField

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

Thanks, subscribe

Status:Closed (won't fix)» Active

quicksketch, how about this a configurable option?

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

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.

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() {
        $(this).parent().find('input.form-submit').mousedown();
    });
});

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

This:
$(this).parent().find('input.form-submit').mousedown();

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?

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

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

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

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() {
        $(this).parent().find('input.form-submit').mousedown();
    });
};
})(jQuery);

subscribe

The uploadify module provides this functionality

#22 works for me

#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.

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.

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.

all good, I figured it out.

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.