AngularJS image preview

Question

I have the following input file:

<div class="col s12">
     <h6>Foto</h6>
     <div class="file-field input-field">
          <div class="btn pink darken-2 waves-effect waves-light">
               <span>Archivo</span>
               <input type="file" name="image" id="image"
               file-model="picture.image" custom-on-change="renderPreview">
           </div>
           <div class="file-path-wrapper">
               <input class="file-path" type="text" readonly>
           </div>
    </div>
</div>

When the directive custom-on-change triggers, I get the file from the input (console.log() works here) so what I want to do next is do a preview of the image I just selected:

$scope.renderPreview = function(event){
      var picture = event.target.files;
      console.log(picture);
      $('#image-preview').attr('src', picture);
}

Which is supposed to be placed here:

<h5 class="center-align">Vista Preliminar</h5>
<div class="col s6 offset-s3">
     <div class="image-preview-container">
          <img id="image-preview" class="z-depth-2">
     </div>
</div>

However, no image is rendered. I've been trying to look for a solution to this, and people always send you to those angular file upload plugins.. I do not want to use those plugins for just a simple task like this.

Is there a way I can render the picture so that the user can see it just before uploading it?

EDIT

My custom-on-change directive:

angular.module('sccateringApp')
  .directive('customOnChange', function () {
      return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        var onChangeHandler = scope.$eval(attrs.customOnChange);
        element.bind('change', onChangeHandler);
      }
    };
  });

Possible duplicate of Preview an image before it is uploaded — Hanlet Escaño
– Hanlet Escaño, Commented Jan 6, 2016 at 5:11
FileList {0: File}0: Filelength: 1__proto__: FileList [object%20FileList]:1 GET http://localhost:9000/[object%20FileList] 404 (Not Found) that is what is shown on the console.log() @RohanPawar — CodeTrooper
– CodeTrooper, Commented Jan 6, 2016 at 5:12

MGZero · Accepted Answer · 2017-07-18 21:17:15Z

3

In your code var picture is array of files, so use index to show image

$scope.renderPreview = function(event){
      var pictures = event.target.files;
      $('#image-preview').attr('src', pictures[0]);
}

as per @Hanlet Escaño suggest try below code

$scope.renderPreview = function (event) {
  if (event.target.files && event.target.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      $('#image-preview').attr('src', e.target.result);
    }

    reader.readAsDataURL(event.target.files[0]);
  }
};

edited Jul 18, 2017 at 21:17

MGZero

6,0225 gold badges33 silver badges47 bronze badges

answered Jan 6, 2016 at 5:14

Rohan Pawar

2,02325 silver badges43 bronze badges

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

3 Comments

Hanlet Escaño Over a year ago

You are going to need HTML5's FileReader API (or similar technique) if you want to preview your file (as explained in the duplicated I added above).

Rohan Pawar Over a year ago

@HanletEscaño his log showing that files array is empty

CodeTrooper Over a year ago

Not exactly the code I used, but definitely involved fileReader, I've never used it before and I've never had the necessity to use an image preview snippet, as I often used a plugin for this. Thanks a lot!

Collectives™ on Stack Overflow

AngularJS image preview

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related