Filedrop only works if alert statement is included in function

Question

I'm using following code -

$(function () {
**alert("html5 upload");**
var dropbox = $('#dropbox'),
    message = $('.message', dropbox);

dropbox.filedrop({
    // The name of the $_FILES entry:
    paramname: 'files',

    maxfiles: 50,
    maxfilesize: 2,
    url: '/Upload/UploadMultipleImages',

    uploadFinished: function (i, file, response) {
        $.data(file).addClass('done');
        // response is the JSON object that post_file.php returns
    },

    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! (configurable)');
                break;
            case 'FileTooLarge':
                alert(file.name + ' is too large! Please upload files up to 2mb (configurable).');
                break;
            default:
                break;
        }
    },

    // Called before each upload is started
    beforeEach: function (file) {
        if (!file.type.match(/^image\//)) {
            alert('Only images are allowed!');

            // Returning false will cause the
            // file to be rejected
            return false;
        }
    },

    uploadStarted: function (i, file, len) {
        createImage(file);
    },

    progressUpdated: function (i, file, progress) {
        $.data(file).find('.progress').width(progress);
    }

});

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


function createImage(file) {

    var preview = $(template),
        image = $('img', preview);

    var reader = new FileReader();

    image.width = 100;
    image.height = 100;

    reader.onload = function (e) {

        // e.target.result holds the DataURL which
        // can be used as a source of the image:

        image.attr('src', e.target.result);
    };

    // Reading the file as a DataURL. When finished,
    // this will trigger the onload function above:
    reader.readAsDataURL(file);

    message.hide();
    preview.appendTo(dropbox);

    // Associating a preview container
    // with the file, using jQuery's $.data():

    $.data(file, preview);
}

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

as in the second line of my code when i'm using alert then my function is working properly but whenever it is removed, the function is not working at all. I've checked on net everywhere it is saying that it might be because of ajax call. but currently on page load am not making any ajax call. if anyone faced same problem then please help me.

whenever I drop file in dropbox it is not working if i remove alert tag from the above code. — Sumit Chourasia, Jul 17 '14 at 17:26
... or http://stackoverflow.com/questions/1267454/javascript-and-ajax-only-works-when-using-alert. — isherwood, Jul 17 '14 at 17:32

score 0 · Accepted Answer · answered Jul 17 '14 at 17:43

Filedrop uses ajax. Put your

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

inside the function createImage()

Filedrop only works if alert statement is included in function

1 Answers1