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

Question

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?

EricP · Accepted Answer · 2021-04-01 19:59:47Z

40

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.

edited Apr 1, 2021 at 19:59

answered Aug 17, 2013 at 2:58

EricP

3,4393 gold badges38 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

evilcelery Over a year ago

This worked without needing to include any extra files, thanks

Werner Echezuria Over a year ago

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 Over a year ago

thanks for this nice solution. what are the browser requirements of this option?

Nikolay Traykov Over a year ago

How are you going to crop the image?

Ivo Renkema · Accepted Answer · 2012-06-13 14:19:58Z

3

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.

answered Jun 13, 2012 at 14:19

Ivo Renkema

2,2081 gold badge31 silver badges43 bronze badges

1 Comment

Amit Patel Over a year ago

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.

Larissa Savchekoo · Accepted Answer · 2016-07-14 02:47:52Z

0

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]) + '"/>');
        });
    },

answered Jul 14, 2016 at 2:47

Larissa Savchekoo

7,8921 gold badge15 silver badges7 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related