Customizing AJAX File Uploader with AJAX Upload

Question

I am trying to use http://valums.com/ajax-upload/ to upload files via AJAX. The reason why is because it meets my needs. However, I need to customize the behavior and I can't figure it out. According to the documentation, I should be able to use FileUploaderBasic, but I can't even get an upload button to appear with FileUploaderBasic. Currently, I'm trying the following:

<div id="file-uploader">                
    <noscript>                      
        <p>Please enable JavaScript to use file uploader.</p>           
    </noscript>             
</div>
<div id="progressbar" style="width:300px;"></div>

<script type="text/javascript">
    $().ready(function () {
        var u = new uploader.FileUploaderBasic({
            element: document.getElementById('file-uploader'),
            action: '/files/upload',
            debug: true,
            onProgress: function (id, fileName, loaded, total) {
                $("#progressbar").progressbar("value", 50);
            },
            onComplete: function(id, fileName, responseJSON){
                $("#progressbar").progressbar("value", 100);            
            },
        });

        $("#progressbar").progressbar({
            value: 0
        });
    });
</script>

For each file that is being uploaded, I would like to show a progress bar. to the right of the progress bar, I would like to show the percentage of the upload that has completed. Below the progress bar, I would like to show the file name and the total size of the file. I know the HTML for this is something like the following:

<table border='0' cellpadding='0' cellspacing='0'>
  <tr><td rowspan='2'>[img]</td>
    <td>[Progress Bar]</td>
    <td>[%]</td>
  </tr>

  <tr><td colspan='2'>[filename] - [filesize]</td></tr>
</table>

I'm just not sure how to accomplish this with FileUploaderBasic. What am I doing wrong? I've reached a point of desperation. Please help!

Answer 1

try changing

element: document.getElementById('file-uploader')

to

button: document.getElementById('file-uploader')