Blueimp Jquery File Upload : Doesn't show thumbnail preview image

javascript jquery html jquery-ui file-upload

19,336

Solution 1

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 2

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.

19,336

Author by

Amit Patel

A freelance developer based in Ahmedabad, India. Passionate about web technologies and following best practices. Focusing on Ruby on Rails. I still love vanilla JS and jQuery. LinkedIn: https://www.linkedin.com/in/amitsavani Email: amit [DOT] savani [AT] gmail

Updated on August 25, 2022

Comments

Amit Patel over 1 year

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.

I have been referring the demo to customize this plugin. I am able to print name of the file on the screen but not able to show thumbnail.

Here is the generated html

<!DOCTYPE html>
<html>
<head>
  <title>Fileupload</title>
  <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.fileupload-ui.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.widget.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.tmpl.js?body=1" type="text/javascript"></script>
<script src="/assets/load-image.min.js?body=1" type="text/javascript"></script>
<script src="/assets/canvas-to-blob.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.fileupload.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.fileupload-fp.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.fileupload-ui.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="Akp8GLPQ+DlFYI1g3CUA71hk0vg3G84aVwcVRHTlRUY=" name="csrf-token" />
</head>
<body>
<div class="files">
  <form action="/users" class="upload" id="fileupload" method="post">
    <input id="user_photo" name="user[photo]" type="file" />
    <div>Upload files</div>
  </form>

  <table class="upload_files"></table>
</div>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-jquery-tmpl">
  <tr class="template-upload fade">
    <td class="preview"><span class="fade"></span></td>
    <td class="name"><span>${name}</span></td>
  </tr>
</script>
<script type="text/javascript" charset="utf-8">
    $(function () {
        $('#fileupload').fileupload({
            add: function (e, data) {
                console.log('add');
                $.each(data.files, function (index, file) {
                    console.log('Added file: ' + file.name);
                    //alert($('#tmpl-demo').tmpl(data));
                    $('#template-upload').tmpl(data.files).appendTo('.upload_files');
                });
                var jqXHR = data.submit()
                        .success(function (result, textStatus, jqXHR) {/* ... */})
                        .error(function (jqXHR, textStatus, errorThrown) {/* ... */})
                        .complete(function (result, textStatus, jqXHR) {
                            console.log("complete");
                            //$('.upload_files').append('<tr><td>'+ result +'</td></tr>');
                        });
            },
            progress: function (e, data) {
                console.log('progress');
            },
            start: function (e) {
                console.log('start');
            },
            done: function (e) {
                console.log('done');
            }
        }).bind('fileuploadadd', function (e, data) {
                    console.log('fileuploadadd');
                }).bind('fileuploadprogress', function (e, data) {
                    console.log('fileuploadprogress');
                }).bind('fileuploadstart', function (e) {
                    console.log('fileuploadstart');
                }).bind('fileuploaddone', function (e) {
                    console.log('fileuploaddone');
                });


    });
</script>
</body>
</html>

I compare the html generated after selecting files. The only difference is demo application has <canvas height="72" width="80"></canvas> element within <td class="preview"><span class="fade"></span></td> which is missing in my application.

It looks like some configuration problem. Would anyone please help me to configure it properly to show thumbnail as soon as user selects images from the disk?

Amit Patel almost 12 years

Thanks. I used jquery.fileupload-ui.js and tweak a little to match my requirement. Thanks. I would share the demo application on github once it is in good shape.
evilcelery over 10 years

This worked without needing to include any extra files, thanks
Werner Echezuria over 10 years

Thank you very much, this is what I was looking for. I still don't understand why modifying the add trigger removes the preview functionality.
Andrew Brown about 10 years

thanks for this nice solution. what are the browser requirements of this option?
Nikolay Traykov about 8 years

How are you going to crop the image?