Displaying AngularJS image on drag and drop

I am trying to make the image visible whenever someone drags and drops it to Dropbox using angular js file upload I also looked at this post on SO but couldn't get it to work.

I've tried different things like blob display, file display, but I can't show the image after deleting it in this area.

HTML:

<div ng-file-drop ng-model="files" ng-file-change="placeImage()"
drag-over-class="dragover" ng-multiple="false" class="dropbox" allow-dir="true"
accept=".jpg,.png,.pdf">Drop photo here!</div>

      

        
        
        
      

    

AngularJS:

$scope.placeImage = function () {
    var files = $scope.files;
        if (files && files.length) {
            for (var i = 0; i < files.length; i++) {
                ('.dropper').html(files[i]); //does not work: obvious desperate move
                ('.dropper').html(files[i].__proto__.__proto__); //Doesn't work (even tried 64base)
            }
        }
}

      

        
        
        
      

    

How can I display an image after deleting it in Dropbox?

UPDATE

The following does not work either:

 $("<img />").attr("src", files[i]).appendTo(".dropper");

      

        
        
        
      

    

or

 $("<img />").attr("src", files[i].__proto__.__proto__).appendTo(".dropper");

      

        
        
        
      

    

Then the following error occurs:

  http://localhost:8080/project/[object%20Object] 404 (Not Found)

      

        
        
        
      

    

Update 2:

Fixed with the following:

$scope.placeImage = function () {
        var ctx = document.getElementById('canvas').getContext('2d');
        var url = URL.createObjectURL($scope.files[0]);
        var img = new Image();
        img.onload = function() {
            ctx.drawImage(img, 20, 20);    
        }
        img.src = url;
}