jQuery file upload with paperclip, showing preview image before upload

Question

I'm trying to accomplish like this

Trying to show preview of the images that I want to upload, but nothing is showing up. I'm looking at my log and when I try to upload, the log is spitting out stuff, mostly Image Exists (0.2ms) and Image Load (0.3ms), and showing SELECT 1 AS.... SQL syntax

This is my form.html.erb

<%= simple_form_for @photo, html: { multipart: true, id: 'bePhoto' } do |f| %>    
  <div class="row fileupload-buttonbar">
    <div class="col-lg-7">
        <!-- The fileinput-button span is used to style the file input field as button -->
        <span class="btn btn-success fileinput-button">
            <i class="glyphicon glyphicon-plus"></i>
            <span>Add files...</span>
            <input type="file" name="photos[]" multiple>
        </span>
        <button type="submit" class="btn btn-primary start">
            <i class="glyphicon glyphicon-upload"></i>
            <span>Start upload</span>
        </button>
        <button type="reset" class="btn btn-warning cancel">
            <i class="glyphicon glyphicon-ban-circle"></i>
            <span>Cancel upload</span>
        </button>
        <button type="button" class="btn btn-danger delete">
            <i class="glyphicon glyphicon-trash"></i>
            <span>Delete</span>
        </button>
        <input type="checkbox" class="toggle">
        <!-- The global file processing state -->
        <span class="fileupload-process"></span>
    </div>

    <!-- The global progress state -->
    <div class="col-lg-5 fileupload-progress fade">
        <!-- The global progress bar -->
        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
            <div class="progress-bar progress-bar-success" style="width:0%;"></div>
        </div>
        <!-- The extended global progress state -->
        <div class="progress-extended">&nbsp;</div>
    </div>
</div>
<!-- The table listing the files available for upload/download -->

<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>

<% end %>

Then I have this javascript

$(function () {
    $('#bePhoto').fileupload();

    $('#bePhoto').addClass('fileupload-processing');
      $.ajax({
          // Uncomment the following to send cross-domain cookies:
          //xhrFields: {withCredentials: true},
          url: $('#bePhoto').fileupload('option', 'url'),
          dataType: 'json',
          context: $('#beTripForm')[0]
      }).always(function () {
          $(this).removeClass('fileupload-processing');
      }).done(function (result) {
          $(this).fileupload('option', 'done')
              .call(this, $.Event('done'), {result: result});
    });    
});

I also have this

<script src="http://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
<script src="http://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<script src="http://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>

And this:

//= require jquery-fileupload/basic
//= require jquery-fileupload/basic-plus

I pretty much tried to mimic the sample demo, but not sure if I'm doing this correctly.

Answer 1

If your concern is to display the selected image before uploading and upload them during form submit I tried to write custom script for this.Please have a look and let me know.

Here I read the input file content and display them in image tag as thumbnail.It doesn't show the progress of file uploading but all the files are submitted during form submit event.

Please add a div to display the thumnail image just above the file input field

    <div class="row" id="uploader-wrapper"></div>

    <%= f.file_field(:photo, id: 'photo_upload_btn', multiple: true) %>

And add event listner for your file input field.

$("#photo_upload_btn").change(function () {
        displayThumbnail(this);
});

Add the following Javasript code to display the Thumbnail

function displayThumbnail(input) {
        for( var i = 0;i<input.files.length;i++){
            if (input.files && input.files[i]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    if ($('#photo_upload_btn').valid()) {
                        var $newImageThumbnail = makeElement('img',{ class: "image-frame",src: e.target.result});
                        $('#uploader-wrapper').append($newImageThumbnail);
                    }
                };
                reader.readAsDataURL(input.files[i]);
            }
        }

    }

    function makeElement(element, options) {
        var $elem = document.createElement(element);
        $.each(options, function (key, value) {
            $elem.setAttribute(key, value);
        });
        return $elem;
    }

Also don't forget to style the thumbnail

.image-frame {
  border: 1px dashed #333;
  width: 150px;
  height: 150px;
  margin: 0 0 10px;
}