Blueimp Jquery File Upload : Doesn't Show Thumbnail Preview Image

I used Blueimp jQuery File Upload in my Rails application. When user select files, I want to show thumbnail of the image and the name of the image before uploading files to server.

Solution 1:

Place this inside your add(e, data) callback function, adjusting for your own html elements accordingly:

$('body').append('<img src="' + URL.createObjectURL(data.files[0]) + '"/>');

The URL.createObjectURL function is documented here.

Solution 2:

Those previews are not part of the basic version. They are part of the "additional plugin providing a complete user interface (jquery.fileupload-ui.js)."

So you have to include those js files, and you probably need some HTML wrappers.

Check out the source HTML of the demo, because it is included in that demo.

Solution 3:

Edit function _renderPreviews in file jquery.fileupload-ui.js

_renderPreviews: function (data) {           
        data.context.find('.preview').each(function (index, elm) {               
            $(elm).append(data.files[index].preview);
            $(elm).append('<img width="90" src="' + URL.createObjectURL(data.files[0]) + '"/>');
        });
    },