3

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;
}
Community
  • 1
  • 1
Moody
  • 851
  • 2
  • 9
  • 23

1 Answers1

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.

Matthew Jaspers
  • 1,546
  • 1
  • 10
  • 13
  • +1 good point thanks. Unfortunately, I still get an error if I look at my console. (please see the updated post) – Moody Apr 17 '15 at 19:57
  • 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. – Matthew Jaspers Apr 17 '15 at 20:07
  • 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. – Moody Apr 17 '15 at 20:29