AngularJS file upload display image in drag and drop

Question

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

Ben Jaspers · Accepted Answer · 2015-04-17 16:23:09Z

1

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 Apr 17, 2015 at 16:23

Ben Jaspers

1,5461 gold badge10 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Moody Over a year ago

+1 good point thanks. Unfortunately, I still get an error if I look at my console. (please see the updated post)

Ben Jaspers Over a year ago

I'm not familiar with the ng-file-drop directive, but it looks like it's wrapping the file data in a file object and to access it prior to uploading, you have to use the FileReader api, per the answer you link to above.

Moody Over a year ago

I managed to fix it (see update 2). Even though I don't exactly use your above stated way, I appreciate your answer and reference and I think it is even better than my way & will have a look at it later.

Collectives™ on Stack Overflow

AngularJS file upload display image in drag and drop

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related