uploadify with prettyPhoto : uncaught exception: C

We have been using uploadify for image upload and prettyPhoto for displaying images on lightbox in our Rails application. Both works well if used separately. Now we want to display uploadify control on lightbox just like dropbox uses but it start screaming if used with prettyPhoto.

Here is sample html using uploadify with prettyPhoto.

<!DOCTYPE html>
<html>
<head>
    <title>My Uploadify Implementation</title>
    <link rel="stylesheet" type="text/css" href="uploadify.css">
    <link rel="stylesheet" type="text/css" href="prettyPhoto.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script>
    <script src="jquery.prettyPhoto.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(function() {
        $('#file_upload').uploadify({
            'swf'      : 'uploadify.swf',
            'uploader' : 'uploadify.php'
            // Your options here
        });

        $('#closeme').live('click', function() {
            $.prettyPhoto.close();
            return false;
        });

        $("a[rel^='prettyPhoto']").prettyPhoto();

    });
    </script>
</head>
<body>
<a href="#inline-1" rel="prettyPhoto" >popop</a>
    <div id="inline-1" style="display:none;">
        <p>This is inline content opened in prettyPhoto.</p>
        <input type="file" name="file_upload" id="file_upload" />
    </div>
</body>
</html>

Here you will see link to popup and by clicking on the link it shows uploadify control on lightbox. Then you chooses images from the disk to upload to server. After choosing images I face two issues:

1) Getting Error: uncaught exception: Call to StartUpload failed javascript error on FF and Crome

2) The selected images are not getting listed on uploadify control on lightbox. If you close the pupup and again click on popup link it shows list of files.

Uploadify works fine if I remove $("a[rel^='prettyPhoto']").prettyPhoto(); line.

Do you have any idea how it can be fixed?

Also I would appreciate if someone suggest other plugins to achieve such dropbox style uploaders.

Thanks, Amit Patel

You'll want to initialize uploadify after the lightbox is opened and not on page load. The reason for this is because Flash will not load if the element is hidden.

I looked at the prettyPhoto api and couldn't find any event that is called after the lightbox has finished opening, but that's what you'll need to do.