how to show thumbnails of dropped images before submit

Question

<div class="top-main-section">
  <%= form_for @usr_vendor_web_slide ,url:{action: "slidecreate"} , html: {class: "form-horizontal"} do |f| %>
    <div class="top-main-section-area">
      <div id="upload-area" class="uploader1" onclick="$('#post_image').click()">
        <%= f.file_field :images, :onchange => 'readURL(this)', class:'slide-img', multiple: true, id:'slide-img'%>
          <img id="slide_image" src="#" alt="image" style="display: none;" class="slide_image" />
      </div>
    </div>
    <%= f.submit({:class => 'btn btn-primary'}) %>
  <% end %>
</div>

<div id="thumbnail" class="thumbnail">
  <img id="slide_image1" src="#" alt="" style="" />
</div>

javascript file

var data = [];

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        var ids = $("#slide_image");
        insert();

        function insert() {
            var id;
            id = ids;
            data.push({
                id: id,
            });
            clearAndShow()
        }

        function clearAndShow() {
            // Clear our fields
            ids = "";
            console.log(data)
        }
        reader.onload = function(e) {
            $("#slide_image").style.display = 'block';
            $('#slide_image').attr('src', e.target.result).width(1000).height(480);
            $("#slide_image").style.display = 'block';
            $('#slide_image1').attr('src', e.target.result).width(100).height(100);
        };
        reader.readAsDataURL(input.files[0]);
    }
}

I'm try to show images thumbnails before submit . I'll success in current dropped image show in top main section area and show it's thumbnail in thumbnail part. but i want to show all thumbnails in thumbnail part before submit. I'll try to make a javascript array and store images in that array. but i cannot get image src to show in thumbnail part. appreciate your ideas

score 2 · Accepted Answer · answered Dec 18 '17 at 05:28

  function readURL(input) {


    if (input.files && input.files[0]) {
        var reader = new FileReader();


        reader.onload = function (e) {

            document.getElementById("slide_image").style.display = 'block';
            $('#slide_image')
                .attr('src', e.target.result)
                .width(1000)
                .height(480);







        };
        reader.readAsDataURL(input.files[0]);



    }
   }

window.onload = function() {
document.getElementById('files').addEventListener('change', 
handleFileSelect, false);


function handleFileSelect(evt) {

    console.log("hariii");
    var files = evt.target.files;

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;
        }

        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function (theFile) {
            return function (e) {
                // Render thumbnail.
                var span = document.createElement('span');
                span.innerHTML =
                    [
                        '<img style="height: 75px; border: 1px solid #000; 
margin: 5px" src="',
                        e.target.result,
                        '" title="', escape(theFile.name),
                        '"/>'
                    ].join('');

                document.getElementById('thumbnail').insertBefore(span, 
null);
            };
        })(f);

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }
 }

}

this is my solution and it works fine for my proect

glad to know you found a solution. – CHRIS LEE Dec 18 '17 at 07:42 — CHRIS LEE, Dec 18 '17 at 07:42

score 1 · Answer 2 · answered Dec 15 '17 at 07:09

Showing Thumbnail preview for the images which user selected to upload will help user to make sure they are selected the right images. Here is the code which can show preview of images as thumbnail for the selected objects. You can try either selecting or drag and drop for previewing the images.

This code uses the HTML5 features and may not work with old browsers. The two main HTML5 features used by this code are FileReader and Canvas.

Javascript

jQuery(function($){
var fileDiv = document.getElementById("upload");
var fileInput = document.getElementById("upload-image");
console.log(fileInput);
fileInput.addEventListener("change",function(e){
  var files = this.files
  showThumbnail(files)
},false)

fileDiv.addEventListener("click",function(e){
  $(fileInput).show().focus().click().hide();
  e.preventDefault();
},false)

fileDiv.addEventListener("dragenter",function(e){
  e.stopPropagation();
  e.preventDefault();
},false);

fileDiv.addEventListener("dragover",function(e){
  e.stopPropagation();
  e.preventDefault();
},false);

fileDiv.addEventListener("drop",function(e){
  e.stopPropagation();
  e.preventDefault();

  var dt = e.dataTransfer;
  var files = dt.files;

  showThumbnail(files)
},false);

function showThumbnail(files){
  for(var i=0;i<files.length;i++){
    var file = files[i]
    var imageType = /image.*/
    if(!file.type.match(imageType)){
      console.log("Not an Image");
      continue;
    }

    var image = document.createElement("img");
    // image.classList.add("")
    var thumbnail = document.getElementById("thumbnail");
    image.file = file;
    thumbnail.appendChild(image)

    var reader = new FileReader()
    reader.onload = (function(aImg){
      return function(e){
        aImg.src = e.target.result;
      };
    }(image))
    var ret = reader.readAsDataURL(file);
    var canvas = document.createElement("canvas");
    ctx = canvas.getContext("2d");
    image.onload= function(){
      ctx.drawImage(image,100,100)
    }
  }
}
          });

HTML

<input type="file" style="display:none" id="upload-image" multiple="multiple"></input>
<div id="upload" class="drop-area">
   Upload File
</div>
<div id="thumbnail"></div>

CSS

.drop-area{
  width:100px;
  height:25px;
  border: 1px solid #999;
  text-align: center;
  padding:10px;
  cursor:pointer;
}
#thumbnail img{
  width:100px;
  height:100px;
  margin:5px;
}
canvas{
  border:1px solid red;
}

I checked this earlier but i have a rails dropzone. Therefore this not work for me. I know this is good solution in html — Thilanka Umayanga Jayarathna, Dec 15 '17 at 07:33
There is a clear answer. You need to use FileReader class. This may work for you. https://stackoverflow.com/questions/18189330/rails-3-best-way-to-preview-image-before-upload — CHRIS LEE, Dec 15 '17 at 08:08
i'll upvote for you because this also a good solution in html. — Thilanka Umayanga Jayarathna, Dec 18 '17 at 05:29

how to show thumbnails of dropped images before submit

2 Answers2