how to put this funtion inside a directive in angularjs

Question

This is the function code and I want to put this inside a directive.

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }
  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

This is in javaScript. The below is the html code

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

I actually want to upload an image and preview it.

Possible duplicate of http://stackoverflow.com/questions/13963022/angularjs-how-to-implement-a-simple-file-upload-with-multipart-form — Anil Sharma, Aug 14 '15 at 09:16

Sofiene Djebali · Answer 1 · 2015-08-14T10:16:06.683

app.directive('uploader',function(){
    return {
        scope : {country:'='},
        template: '<input type="file" onchange="previewFile()"><br><img src="" height="200" alt="Image preview...">',
        link : function(scope,element,attrs) {
            scope.previewFile = function() {
                var preview = document.querySelector('img');
                var file    = document.querySelector('input[type=file]').files[0];
                var reader  = new FileReader();

                reader.onloadend = function () {
                     preview.src = reader.result;
                }
                if (file) {
                   reader.readAsDataURL(file);
                } else {
                   preview.src = "";
                }
           }
      }
   }
});

Dangerous Dave · Answer 2 · 2015-08-14T09:35:27.587

Javascript

app.directive("fileRead", [function () {
  return {
      scope: {
          fileRead: "="
      },
      link: function (scope, element, attributes) {
          element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                  scope.$apply(function () {
                      scope.fileRead = loadEvent.target.result;
                  });
              }
              reader.readAsDataURL(changeEvent.target.files[0]);
          });
      }
  }
}]);

HTML

   <input type="file" file-read="myFile" ><br>
   <img src="{{myFile}}" height="200" alt="Image preview...">

You'll have the img in the myFile var of the scope and you can use it as you like (preview in img, preview in canvas, save it to a db, write a file,...)

http://jsbin.com/mujivi/edit?html,js,console,output

NewZeroRiot · Accepted Answer · 2015-08-14T09:36:47.237

 .directive('ngPreviewer', function ($http) {
    return {
        restrict: 'E',
        scope: '=',
        link: function (scope, element, attrs) {
            scope.previewFile = function () {
                var preview = document.querySelector('img');
                var file = document.querySelector('input[type=file]').files[0];
                var reader = new FileReader();

                reader.onloadend = function () {
                    preview.src = reader.result;
                }
                if (file) {
                    reader.readAsDataURL(file);
                } else {
                    preview.src = "";
                }
            };
        },
        template: '<input type="file"  onchange="angular.element(this).scope().previewFile()"><br><img src="" height="200" alt="Image preview...">'
    };
});

Then in your code refer to it like this to make it magically appear:

<ng-Previewer></ng-Previewer>

Hope this helps :)

score 0 · Answer 4 · answered Aug 14 '15 at 09:28

You should be able to use this as: <image-preview>. You can take a look at this and see how in the future you can wrap any normal Javascript inside a directive, but you have to think how it can be used multiple times, rather than just once:

var app = angular.module("MyApp", []);
app.directive("imagePreview", ["$timeout", function($timeout) {
    return {
        restrict: "E",
        template: '<input type="file"><br><img ng-src="{{ src }}" height="200" alt="Image preview...">',
        link: function(scope, element) {
            element.find("input").on("change", function() {
                var file = this.files[0];
                var reader  = new FileReader();
                reader.onloadend = function () {
                    $timeout(function() {
                        scope.src = reader.result;
                    });
                }
                if (file) {
                    reader.readAsDataURL(file);
                } else {
                    scope.src = "";
                }
            });
        }
    };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
    <image-preview></image-preview>
</div>

how to put this funtion inside a directive in angularjs

4 Answers4