Uploading an image with preview using javascript, scala (No PHP)

Question

I am trying to implement an image uploading along with previewing it. But some how it is not working. I have searched on google but can't seem to find any solution.

My scala(html) is something like:

<div class="fileupload fileupload-new" data-provides="fileupload">
    <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
        <img src="@currentImage" alt="image upload area for @field.name" data-src="holder.js/100%x100%" />
    </div>
    <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
    <div>
        <input type="file" name="@field.name" id="@id"/>
   </div>
</div>

My Javascript

Fileupload.prototype = {

   listen: function() {
     this.$input.on('change.fileupload', $.proxy(this.change, this));
     if (this.$remove) this.$remove.on('click.fileupload', $.proxy(this.clear, this));
   },

   change: function(e, invoked) {
     var file = e.target.files !== undefined ? e.target.files[0] :   (e.target.value ? { name: e.target.value.replace(/^.+\\/, '') } : null);
     if (invoked === 'clear') return;

     if (!file) {
       this.clear();
       return;
     }

     this.$hidden.val('');
     this.$hidden.attr('name', '');
     this.$input.attr('name', this.name);

  if (this.type === "image" && this.$preview.length > 0 && (typeof file.type !== "undefined" ? file.type.match('image.*') : file.name.match('\\.(gif|png|jpe?g)$')) && typeof FileReader !== "undefined") {
    var reader = new FileReader();
    var preview = this.$preview;
    var element = this.$element;

    reader.onload = function(e) {
      preview.html('<img src="' + e.target.result + '" ' + (preview.css('max-height') != 'none' ? 'style="max-height: ' + preview.css('max-height') + ';"' : '') + ' />');
      element.addClass('fileupload-exists').removeClass('fileupload-new');
    };

    reader.readAsDataURL(file);
  } else {
    this.$preview.text(file.name);
    this.$element.addClass('fileupload-exists').removeClass('fileupload-new');
  }
},

clear: function(e) {
  this.$hidden.val('');
  this.$hidden.attr('name', this.name);
  this.$input.attr('name', '');
  this.$input.val(''); // Doesn't work in IE, which causes issues when selecting the same file twice

  this.$preview.html('');
  this.$element.addClass('fileupload-new').removeClass('fileupload-exists');

  if (e) {
    this.$input.trigger('change', [ 'clear' ]);
    e.preventDefault();
  }
},

trigger: function(e) {
  this.$input.trigger('click');
  e.preventDefault();
}
 };

The PROBLEM is, the image(file) is getting uploaded, but the preview is NOT showing up.
Can anyone please help me with it. Thanks.

Answer 1

Here is basic example with upload and preview img in pure js:

 document.getElementById("local").onchange = function() { var img = document.createElement("img"), reader = new FileReader(); img.file = this.files[0]; reader.onload = (function(aImg) { return function(img) { aImg.src = img.target.result; document.body.appendChild(aImg); } })(img); reader.readAsDataURL(img.file); } 

 <input type="file" id="local"/> 

Hope this will help.