CODEWITHSUNDEEP
phpjqueryfile-uploaduploadify
Rohan Patil
Rohan Patil

Reputation: 2348

Multiple uploadify image upload issue

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

Upvotes: 1

Views: 2459

Answers (3)

MindHacker
MindHacker

Reputation: 63

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

Upvotes: 0

Manse
Manse

Reputation: 38147

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

Upvotes: 6

Den
Den

Reputation: 601

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.

Upvotes: 0

Related Questions