1

I'm trying to accomplish like this

enter image description here

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.

hellomello
  • 8,219
  • 39
  • 151
  • 297

1 Answers1

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;
}
Bibek Sharma
  • 3,210
  • 6
  • 42
  • 64
  • Sorry for this late response... I'm getting an error `Uncaught TypeError: $(...).valid is not a function`... and then its pointing me to this: `if ($('#photo_upload_btn').valid()) {` line – hellomello Aug 03 '15 at 14:47
  • Oh my, I had to add a validation jquery script at the end of my app for it to work!! It works! Thank you so much, I guess I have to figure out how to add progress bars now... Hmmm thanks – hellomello Aug 03 '15 at 14:52
  • I'm not sure if this is supposed to happen, but when I select an image, and then click on the file field to select more images, only the last images that were selected was uploaded only.. (ie, if I select 1 image, and then click on file field again, to select 2 more images, only the last 2 images were uploaded.) – hellomello Aug 03 '15 at 17:26
  • Yaa We can't maintain the previous files using this method please have a look at http://stackoverflow.com/questions/20537696/remember-and-repopulate-file-input – Bibek Sharma Aug 03 '15 at 17:39