CODEWITHSUNDEEP
angularjsangular-file-upload
Moody
Moody

Reputation: 833

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.

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

UPDATE

The following also does not work:

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

or 

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

Upvotes: 4

Views: 5006

Answers (1)

Ben Jaspers
Ben Jaspers

Reputation: 1546

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.

Upvotes: 1

Related Questions