fileUpload

fileupload in angular using raw javascript

by Samar Pattanayak

HTML

<div ng-app="myModule">
  <div ng-controller="myController">
    {{title}}
    <input type="file" ng-model="txt" my-dire="myFile" /> {{fileName}} of type {{fileType}} having size of {{fileSize}} KB
  </div>
</div>

JavaScript

var app = angular.module("myModule", []);
app.controller("myController", function($scope) {
  $scope.title = "Click to upload file";
  //alert($scope.txt)
})
app.directive("myDire", function($parse) {
  return {
    restrict: "EA",
    link: function(scope, ele, attr) {
    	var model = $parse(attr.myDire);
      var modelSetter = model.assign;
    		ele.bind("change", function(){
        	scope.$apply(function(){          	
        		modelSetter(scope,ele[0].files[0]);    
            console.log(ele[0].files[0])
            scope.fileName=ele[0].files[0].name;
            scope.fileSize=ele[0].files[0].size;
            scope.fileType=ele[0].files[0].type;
          })
        })
				
    }
  }
})
  var text = 'outside';
function logIt(){
    console.log(text);
    var text = 'inside';
};
logIt();