Twitter Bootstrap Image Upload with Preview and Progress Bar

Question

How can i use Twitter Bootstrap to upload a single image with preview and progress bar. As currently, Until I save the image, I can not see what any preview or progress bar to u

Answer 1

Hereby, to upload directly using HTML Blob & FormData :

// Now, let's do the upload thingy for our beloved image(s)...
//Bulk Uploading, mannn....

$('.btn-upload').on('click', function (evt) {
    var xhr = new XMLHttpRequest();
    var fd = new FormData();
    fd.append("file", document.getElementById('(your beloved id/class html element)').files[0]);
    xhr.open("POST", "/(your beloved id/class html element)/", true);
    xhr.send(fd);
    xhr.addEventListener("load", function (event) {
        var parseData = $.parseJSON(event.target.response);

        location.reload();
    }, false);
});
// end of bulk uploading...