views:

34

answers:

0

Hey there,

I've been working for a bit on this code, making in function just as I'd like it, but in the end I guess I missed something pretty big: the files don't seem to be uploading. The progress bar has been perfectly tweaked, the dialog box works well, just no files are being uploaded.

What's going on?

My Javascript:

    fileCount = 0;
    barWidth = 0;

$(function() {
var uploader = new plupload.Uploader({
    runtimes : 'flash',
    browse_button : 'pickfiles',
    max_file_size : '10mb',
    url : 'js/upload/upload.php',
    resize : {width : 700, height : 700, quality : 90},
    flash_swf_url : 'js/upload/plupload.flash.swf',
    filters : [
        {title : "Image files", extensions : "jpg,gif,png"},
    ]
});

uploader.bind('Init', function(up, params) {

});

uploader.bind('FilesAdded', function(up, files) {
    $.each(files, function(i, file) {
        fileCount ++
        $('#uploadfiles').fadeIn(200);
        $('#filelist').append(
            '<div id="' + file.id + '">' +
            file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
        '</div>');
    });
});

uploader.bind('FileUploaded', function(up, file) {
    console.log(file.name);
    $('#'+ file.id).fadeOut(200);
});

uploader.bind('UploadProgress', function(up, file) {

    barWidth = barWidth+(file.percent/fileCount)

    $('#progressBar').animate({"width":barWidth+"%"},300);
        if (barWidth == 100 ) {$('#progressBox').delay(2000).fadeOut(200)};
    });

$('#uploadfiles').click(function(e) {
    e.preventDefault();
    $('#filelist').fadeIn(200, function() {
        $('#progressBox').fadeIn(200, function() {
            uploader.start();
        });
    });
});

uploader.init();
});

My HTML (updated per comment below):

<form method="post" action="js/upload/upload.php" enctype="multipart/form-data">
    <div>
        <button id="pickfiles" href="#">Add...</button> 
        <button id="uploadfiles" href="#">Upload</button>
        <br />
        <div id="filelist"></div>
        <div id="progressBox"><div id="progressBar"></div></div>
    </div>
</form>