Jquery Uplaodify images multiple instance and call each instace completeion of previous one

Question

Hi,

I am using Jquery Uploadify for images upload with PHP, here i have multiple instances of uploadify and and each instance is uploading images in different folders.

I want to second instance of uplaodify will start uploading images only after first instance of uploadify uploaded selected image.

$('#listing_image').uploadifySettings('folder','listing_image_TempImage'); $('#listing_image').uploadifyUpload(); $('#listing_image1').uploadifySettings('folder','listing_image1_TempImage'); $('#listing_image1').uploadifyUpload();

i.e 'listing_image1' will get call when processing of 'listing_image' will be completed. How i can achieve this behavior ??

Answer 1

You can create a "callback" function, that fires when the first upload is completed.

$('#listing_image').uploadify({
 'folder'    : '/listing_image_TempImage',
 onComplete: function(){ 
  $('#listing_image1').uploadify({
   'folder'    : '/listing_image_TempImage'
  });
 }
});

With 6 (one after the other) uploads:

$('#listing_image').uploadify({
    'folder'    : '/listing_image_TempImage',
    onComplete: function(){ 
        $('#listing_image1').uploadify({
            'folder'    : '/listing_image_TempImage1',
            onComplete: function(){ 
                $('#listing_image2').uploadify({
                    'folder'    : '/listing_image_TempImage2',
                    onComplete: function(){ 
                        $('#listing_image3').uploadify({
                            'folder'    : '/listing_image_TempImage3',
                            onComplete: function(){ 
                                $('#listing_image4').uploadify({
                                    'folder'    : '/listing_image_TempImage4',
                                    onComplete: function(){ 
                                        $('#listing_image5').uploadify({
                                            'folder'    : '/listing_image_TempImage5'   
                                        });
                                    }   
                                });
                            }           
                        });
                    }
                });
            }
        });
    }
});

I assume that it's this uploadify you are talking about.

For at full list of available callbacks, look in the docs.

Answer 2

If you use sessions, script execution is going to be delayed on server side so each upload will get processed one after another anyway.

Answer 3

Thankyou Webbies... but now file uploading is not working... i think : $('#listing_image').uploadify({ " is not uploading images.

Answer 4

I cant add a comment to you'r answer yet. So i'm writing it here instead.

Try to make one upload work by using this (make sure the links point's to the correct locations):

$('#listing_image').uploadify({
    'uploader'  : 'uploadify.swf',
    'script'    : 'uploadify.php',
    'cancelImg' : 'cancel.png',
    'folder'    : '/listing_image_TempImage',
    onComplete: function(){ 
        // Do oncomplete stuff. 
    }
});

When you can get that to work, then you should be able to make this work.

var uploads = [2,4,5]; // Only number 2,4 and 5
var numberofuploads = uploads.length; // How many is that?
var folderlist = [0, '/folder1', '/folder2', '/folder3', '/folder4', '/folder5', '/folder6']; // List of folders to upload to
var listingimageslist = [0, '#listing_image1', '#listing_image2', '#listing_image3', '#listing_image4', '#listing_image5', '#listing_image6']; // List of form selectors. 

var folder = folderlist[uploads[0]]; // What folder should this form upload to
var listingimages = listingimageslist[uploads[0]]; // With what selector can the form be found?
if (numberofuploads > 1)
{
    var next = 1; // What upload to initiate after this one?
}
initUpload(listingimages,folder); // make the upload thing work. 


function initUpload(e,folder)
{
    $(e).uploadify({
        'folder'    : folder,
        'uploader'  : 'uploadify.swf',
        'script'    : 'uploadify.php',
        'cancelImg' : 'cancel.png',
        onComplete: function(){ 
            var folder = folderlist[uploads[next]];
            var listingimages = listingimageslist[uploads[next]];
            next++
            if (numberofuploads != next)
            {
                initUpload(listingimages,folder);
            }
        }
    });
};

I didn't test the code, but you should be able to make it work if you know a bit of javascript.

Remenber to have all your jQuery code in a $(document).ready like this:

$(document).ready(function() {
 // Insert code here
});