Jquery doesn't show response

Question

I'm using this script in drag & drop file upload system, and it works just fine except for the fact it won't show me the file name. Here's the code

$(function () {
    var dropbox = $('#dropbox'),
        message = $('.message', dropbox),
        template = "";
    dropbox.filedrop({
        paramname: 'pic',
        maxfiles: 5,
        maxfilesize: 50,
        url: 'post_file.php',
        uploadFinished: function (i, file, response) {
            $.data(file).addClass('done');
        },
        error: function (err, file) {
            switch (err) {
            case 'BrowserNotSupported':
                showMessage('Your browser does not support HTML5 file uploads!');
                break;
            case 'TooManyFiles':
                alert('Too many files! Please select 5 at most!');
                break;
            case 'FileTooLarge':
                alert(file.name + ' is too large! Please upload files up to 50mb.');
                break;
            default:
                break;
            }
        },
        uploadStarted: function (i, file, len) {
            createImage(file);
        },
        progressUpdated: function (i, file, progress) {
            $.data(file).find('.progress').width(progress);
        }
    });

    function gName(file) {
        template = '<div class="preview">' +
            '<p>' + file.name + '</p>' +
            '</span>' +
            '<div class="progressHolder">' +
            '<div class="progress"></div>' +
            '</div>' +
            '</div>';
    }

    function createImage(file) {
        var preview = $(template);
        var reader = new FileReader();
        reader.readAsDataURL(file);
        message.hide();
        preview.appendTo(dropbox);
        $.data(file, preview);
    }

    function showMessage(msg) {
        message.html(msg);
    }
});

If I run alert(file.name) within createImage function, it will grab it for me, however the template simply isn't added to the page at all. This is pretty much the only way I can define the template without getting an error for it, but it will not display it. If I change the template to something like

var template = '<div class="preview">'+
'<span class="imageHolder">'+
'<img />'+
'<span class="uploaded"></span>'+
'</span>'+
'<div class="progressHolder">'+
'<div class="progress"></div>'+
'</div>'+
'</div>'; 

It works just fine, but I can't access file.name within that variable, and that's really all I need.

Answer 1

Ok I think I see what you're trying to do.

var template = '<div class="preview">' +
    '<p>' + file.name + '</p>' +
    '</span>' +
    '<div class="progressHolder">' +
    '<div class="progress"></div>' +
    '</div>' +
    '</div>';

What you'll want to do is specify (or create) an object, then use .append() to add your template .

$('#dropbox').append(template);

This will add your template right before the closing tag of #dropbox

You shouldn't have to wrap a single variable in a function. As long as file is in the same scope (or an inner level of the level it's on) and above the call for it, this will work just fine.

If you do feel so inclined to wrap it in a function, return(thevariable) so it isn't just sitting there ;)

Faddle with my Fiddle ?