Preview image before upload with js

Question

I am building a BlogApp and I am stuck on a Problem.

What i am trying to do:-

I am trying to preview image before upload. I am using cropping feature to crop the Image but I also want to preview cropped image before Upload too.

template.html

#THIS IS MY CODE

const crop = () => {
  var $image = $("#image");
  var cropData = $image.cropper("getData");
  $("#id_x").val(cropData["x"]);
  $("#id_y").val(cropData["y"]);
  $("#id_height").val(cropData["height"]);
  $("#id_width").val(cropData["width"]);
}

$(function() {

  /* SCRIPT TO OPEN THE MODAL WITH THE PREVIEW */
  $("#id_file").change(function() {
    if (this.files && this.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
        $("#image").attr("src", e.target.result);
        $("#modalCrop").modal("show");
      }
      reader.readAsDataURL(this.files[0]);
    }
  });

  /* SCRIPTS TO HANDLE THE CROPPER BOX */
  var $image = $("#image");
  var cropBoxData;
  var canvasData;
  $("#modalCrop").on("shown.bs.modal", function() {
    $image.cropper({
      viewMode: 1,
      aspectRatio: 1 / 1,
      minCropBoxWidth: 200,
      minCropBoxHeight: 200,
      ready: function() {
        $image.cropper("setCanvasData", canvasData);
        $image.cropper("setCropBoxData", cropBoxData);
      }
    });
  }).on("hidden.bs.modal", function() {
    cropBoxData = $image.cropper("getCropBoxData");
    canvasData = $image.cropper("getCanvasData");
    $image.cropper("destroy");
  });

  $(".js-zoom-in").click(function() {
    $image.cropper("zoom", 0.1);
  });

  $(".js-zoom-out").click(function() {
    $image.cropper("zoom", -0.1);
  });


  /* SCRIPT TO COLLECT THE DATA AND POST TO THE SERVER */
  $(".js-crop-and-upload").click(function() {
    crop()
    $("#formUpload").submit();
  });
  $(".js-crop-only").click(function() {
    crop()
    $("#modalCrop").modal("hide");
  });

});













  
  
    Image: 
    
    
    
    
    
    


    



  




  
    
      
        
        Crop the photo

Model instance name :- file

What have i tried:-

I saw many answers and found many answers but they didn't work for me.
I also tried this :-

document.getElementById("files").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("image").src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

BUT it didn't worked for me, Because i want to show the cropped image and when i put this code then in my browser it shows two file upload options which is one for preview and one for Crop and Upload. AND i want to show the cropped image before upload within one file upload option.

I tried many codes but nothing worked for me. I don't what is wrong with it.

Any help would be Appreciated.

user_183846 · Answer

You should create Image object first, for example:

      function createPreviewImage(file) {
          imgElm = document.getElementById("ImgDiv")
          var image = new Image();
          image.src = "";
          var reader = new FileReader();
          reader.onload = (e) => {
              imgElm = e.target.result;
          };
          reader.readAsDataURL(file);
       }

user_3603681 · Answer

URL.createObjectURL can help you generate a preview

const changehandler=function(e){
  let url=URL.createObjectURL( e.target.files[0] )
  let div=e.target.parentNode.querySelector('div');
  let img=document.createElement('img');
    img.src=url;
    img.className='preview';

  div.appendChild( img )
};

document.querySelector('input[type="file"]').addEventListener('change', changehandler );


  Image:

Preview image before upload with js

2 Answers