Multiple uploadify image upload issue

Question

I am using multiple uploadify instances on single page. But the problem is that when I submit the form,form gets submitted before the upload of all the files.

I tried event.preventDefault(); to prevent the form submission before the image upload. but I am not getting the solution. Please suggest me some way by which I can prevent the form submission until all the uploadify files gets uploaded.

Here is my function

$("#add_facility_form .form-submit").click(function(event){

        event.preventDefault();
      $('#gallary').uploadifyUpload();
      $('#brochures').uploadifyUpload();
      $('#award_logo').uploadifyUpload();
      $('#acc_logo').uploadifyUpload();
      $('#file_upload').uploadifyUpload();

       $("#add_facility_form").submit();
  });

Manse · Accepted Answer · 2012-02-15 13:42:41Z

6

I would suggest using classes for your file uploads - will reduce your jQuery code .. for example ...

<input type="file" id="file1" name="file1" class="uploadifyfile" />
<input type="file" id="file2" name="file2" class="uploadifyfile" />
<input type="file" id="file3" name="file3" class="uploadifyfile" />

Then your jQuery becomes :

$("#add_facility_form").submit( function(event){
    $('.uploadifyfile').uploadifyUpload(); // uses class instead of multiple IDs
    if (numFilesUploaded < $(".uploadifyQueueItem").length) { return false; }
});

Then when you initialise the uploadify elements add an onComplete method to keep a track of the completed uploads :

$(".uploadifyfile").each(function () {
    $(this).uploadify({
       'onComplete': function (event, queueId, fileObj, response, data) {
         incrementUploadedCount();
       }
    });
});

Then create a variable for keeping a track of the completed uploads then in the incrementUploadedCount function check that all have been complete, if they have submit the form

// keep track of uploaded count 
var numFilesUploaded = 0;

function incrementUploadedCount() {
    numFilesUploaded++; // increment complete count
    // check if complete count matches number of uploadify elements
    if (numFilesUploaded == $(".uploadifyQueueItem").length) {
         // submit your form
         $("#add_facility_form").submit();
    }
}

edited Feb 15, 2012 at 13:42

answered Feb 15, 2012 at 13:30

Manse

38.1k11 gold badges88 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

DaveRandom Over a year ago

A key point that you forgot to mention is that his existing trigger function should be a $('#form-id').submit() handler and it should if (numFilesUploaded < $(".uploadifyQueueItem").length) { return false; } to prevent the form submission until the uploads are complete. But +1

Manse Over a year ago

@DaveRandom Thanks - updated the code ... make more sense now ?

DaveRandom Over a year ago

Indeed it does. One thing I have just realised actually is that I'm not sure if that if (...) { return false; } is required, or whether you can just return false; - I'm not sure if calling .submit() fires the submit handler or not. I would have thought it should, and I just tested in Chrome and it does, but it may not be the case everywhere - probably best to put it in just in case.

Manse Over a year ago

@DaveRandom I was just thinking exactly the same thing .... <strike>gonna test that somewhere else - my initial thoughts is that the submit() would fire the submit handler</strike>

Den · Accepted Answer · 2012-02-15 13:30:30Z

0

I think you must work with uploadify event handlers, such as complete or success, and when all of them, are called (upload was successfull) then call .sumbit.
I haven't worked with uploadify, but i'm sure there must be such events.

answered Feb 15, 2012 at 13:30

Den

6013 silver badges10 bronze badges

Comments

MindHacker · Accepted Answer · 2013-06-06 08:56:54Z

ManseUK's answer is perfect, but I am not sure if it covers uploadify elements that are added dynamically (through AJAX, after the page has been loaded). I faced this problem. Then while reading the "live()" function on the jQuery API, I realised it can be done this way:

$(document).ready(function(){
    $('.upload_child_photograph').live('uploadifyEvent', function(){
        var child_id = $(this).attr('id').replace('upload_child_photograph_', "");

        $('#upload_child_photograph_' + child_id).uploadify({
            'auto'     : false,
            'swf'      : 'uploadify.swf',
            'uploader' : 'uploadify.php', 
            'uploadLimit' : 10, 
            'multi': true,
            'fileSizeLimit' : 0
        });
    });

    $(".upload_child_photograph").trigger("uploadifyEvent");
});

Collectives™ on Stack Overflow

Multiple uploadify image upload issue

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related