What is wrong with my Flimsy AJAX File Upload?

Question

Hello all,

I know you can not do an AJAX File Upload but this just a name I have chosen to use. :)

I am making use of this JQuery plugin. I think the main problem is I am using it in a slightly different context. Here is how I use it and I think this is the problem.

I first make a form:

$("#flash").html("<input id='vidup' type='file' name='file' size='10' /><input type='button' name='submit' onclick='videoUpload();' value='Upload' />");

I click on the button will call this videoUpload function which makes an AJAX request to get a variable which is the URL to upload to, this is dynamically created:

function videoUpload(){
    $.get("getUploader.php", function(data){
    new AjaxUpload('#vidup', {
       action: data,
       name: 'myfile',
       responseType: 'xml',
       onSubmit: function() {
         // allow only 1 upload
      alert('onSubmit' + data);
         this.disable();
       },
       onComplete: function(file, response){
        alert('Response' + response);
       }
     });
    });
}

However, the only thing that happens is that hidden field is created titled 'myfile' but none of my alerts show up! The creator of the plugin is making use of it via the "$(document).ready(function()" and I am not, will this cause a problem?

Please ask questions as I do not know what other info to give!

Thanks all

Update

It manages to add the input field with this markup:

    <input type="file" name="myfile" style="margin: -5px 0pt 0pt -175px; 
padding: 0pt; position: absolute; width: 220px; height: 30px; font-size: 14px; 
opacity: 0; cursor: pointer; display: none; z-index: 2147483583;"/>

However, it doesn't proceed to upload the file. I thought it should have also created an iFrame?

Answer 1

The problem is that the plugin is registered at ready() time. At that time your #flash div is empty. You can modify the plugin probably binding the call to other event, but this is not a very good idea, or just create the div from php to be there when ready() is called. The same thing happen to me with the Thickbox plugin. I dont really think is a good idea for plugin developers to register actions at ready() as a lot of content can be generated afterwards.

Answer 2

I am not sure that my problem was similar, but i was tackling to use colorbox on jquery created links. It didn't work because of the plugins document ready usage. Then i tried this and it worked.

function colorbox() {
                $('.gf-title').colorbox({width:"80%", height:"80%", iframe:true});
            };


            $(window).load(function(){
                colorbox();              
            });