AjaxUpload Script Leaving Spaces in Filenames

Question

I've searched this site and I can't seem to find an answer. I have a simple AjaxUpload script for uploading 10s audio samples and then displaying the uploaded file as both BBCode and a flash player (on the same page). The uploadSample.php deals with spaces in filenames by replacing them with underscores, but the generated code in the <input type="text"/> still has spaces in the filenames even thought the PHP script removed them, hence the BBCode is wrong and the flashplayer can't find the file.

The script is obviously grabbing the original filename before the PHP script has stripped the spaces, so is there a way of grabbing the proper filename, complete with underscores, after uploading?

jQuery

$(function() {
        var url = "uploads/samples/";
        var btnUpload = jQuery('#up');
        var status = jQuery('#status');
        new AjaxUpload(btnUpload, {
            action: 'uploadSample.php',
            name: 'uploadfile',
            onSubmit: function(file, ext) {
                status.html('<img src="public/upload/ajax-loader.gif">');
            },
            onComplete: function(file, response) {
                if (response === "success") {
                    $("#status").fadeOut();
                    $("#bb").val('[sample=' + url + file + ']');
                    $("#flash").html("<embed width='400' height='27' quality='best' src='public/upload/player.swf' flashvars='audioUrl=" + url + file + "' type='application/x-shockwave-flash'>");
                } else {

                    // run error code
                }
            }
        });

    });

Fiddle (if needed): http://jsfiddle.net/Nn5gG/1/

Answer 1

Change the code line where you are outputting the link to the following:

$("#flash").html("<embed width='400' height='27' quality='best' src='public/upload/player.swf' flashvars='audioUrl=" + url + file.replace(' ', '_') + "' type='application/x-shockwave-flash'>");

which tells javascript to replace any spaces in the filenme with underscores.

The other solution is to ensure that the filename being passed back by PHP has already undergone the space replace before returning the output.

Answer 2

The filename is still the original one because your php has no affect on your js. You could return the filename in your response or replace the spaces in the js as well.