CODEWITHSUNDEEP
jquerycssflashuploadifyusability
sandeep
sandeep

Reputation: 2234

background uploading using uploadify

I am using the uploadify flash component, which is in Jquery UI dialog, for uploading files to the web server using AJAX. But, in the case of multiple file uploads, users have to wait until all of the files have uploaded.

Until that, one can not close that dialog box - if the user closes the dialog, the uploader is lost.

So, how can I upload files in the background using uploadify, or any other plugin?

Upvotes: 1

Views: 795

Answers (3)

Jan
Jan

Reputation: 5815

How about just changing the css of the upload dialog so that it turns into a bar at the bottom of the window when the upload is started? Removing the dialog completely is not a good idea, the user has no idea of when the upload is finished and when he/she can safely navigate away from the page.

If you really want to remove the dialog without deleting the upload there's always

$(".upload_dialog").css({ 'display':'none' });

EDIT: I tried out the uploadify website, and it seems like the div containing the upload dialog has a class "uploadify-queue" and the items inside are "uploadify-queue-item". You can figure things like that out by right-clicking the element you're interested in and selecting "Inspect element" if you're using Chrome or Firefox. If you're developing on anything other than Chrome or Firefox, switch NOW!

So adding this to your CSS should give you a bar at the bottom of the screen.

.uploadify-queue 
{
  margin: 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1000;
  background: whiteSmoke;
}

Upvotes: 1

Neeraj
Neeraj

Reputation: 158

You can achieve background uploading by using following steps:

1) Create uploadify on lightbox/ui dialog box.

2) Give a button below uploadify something like done/start upload, when user clicks this button hide the poup box, hide the overlay and call uploadify method to start uploading the files.

Note: Try z-index to hide the poup/dialog box below other elements.

Upvotes: 1

VVV
VVV

Reputation: 7593

First you need to disable the close dialog button when the user hits the submit button to upload the files.

Then when you initialize uploadify, you can use some methods. Uploadifu has a "queueComplete" method that lets you know when all the files have been processed. Here is the sample provided from the site.

$(function() {
    $("#file_upload").uploadify({
        'swf'      : '/uploadify/uploadify.swf',
        'uploader' : '/uploadify/uploadify.php',
        'onQueueComplete' : function(queueData) {
            alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
        }
    });
});

Once all the files are uploaded, the onQueueComplete will trigger the code you put there. So from there, you could enable the close dialog button.

As for enabling/disabling the dialog button, you would need to provide us the code to the button. Is it a simple link?

Upvotes: 1

Related Questions