AngularJS file upload display image in drag and drop


I’m trying to make the image visible whenever someone drag and dropped it inside the dropbox using angular js file upload
I have also looked at this post on SO, but wasn’t able to make it work.

I tried various things, such as display the blob, display the file, but I can not manage to show the image after it is dropped in the area.


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


$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 the image after it has been dropped in the dropbox?


The following also does not work:

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


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

The following error occurs then:

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

Update 2:

Fixed by using 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;


A file isn’t an HTML element. You have to assign the file as the src of an img tag.

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

I think the above one-liner will work with angular’s built-in jQuery lite, but it may require jQuery. It should give you an idea of what you need to do at least.

Answered By – Matthew Jaspers

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.