AngularJS Загрузка изображения изображения в режиме перетаскивания

Question

Я пытаюсь сделать изображение видимым всякий раз, когда кто-то перетаскивает его в окно сбрасывания, используя angular js file upload Я также посмотрел at this post на SO, но не смог заставить его работать ,

Я пробовал различные вещи, такие как отображение blob, отображение файла, но я не могу показать изображение после его удаления в этой области.

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) 
      } 
     } 
} 

Как я могу отобразить изображение после того, как он упал в раздаточной?

ОБНОВЛЕНИЕ

Ниже также не работает:

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

или

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

Следующая ошибка возникает тогда:

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

Обновление 2:

Фиксированный с помощью следующих действий:

$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; 
} 

Answer 1

Файл не является HTML элементом. Вы должны назначить файл как src тега img.

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

Я думаю, что выше один лайнер будет работать с угловой встроенный JQuery лайт, но это может потребовать JQuery. Это должно дать вам представление о том, что вам нужно сделать по крайней мере.