FileUpload Directive

this is the file upload directive example

by DineshAngappa

HTML

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div ng-app="fileUploadModule" ng-controller="BodyBackgroundCtrl" ng-style="{'background-image' : 'url('+bodyBackgroundImage+')'}">
        <file-upload-input background-image="bodyBackgroundImage"></file-upload-input>
    
<script type="text/ng-template" id="templates/file-upload-drop.html">	
<div class="container">
      <div class="panel panel-default">
        <div class="panel-heading"><strong>Upload File</strong></div>
        <div class="panel-body">
          <div class="container">
            <div class="row">
              <div class="col-xs-6">
                <!-- Standar Form -->
                <h4>Select files from your computer</h4>
                <div class="form-inline">
                  <div class="form-group">
                    <input type="file" name="files[]" id="js-upload-files" multiple>
                  </div>
                </div>
                <!-- Drop Zone -->
                <h4>Or drag and drop files below</h4>
                <div class="upload-drop-zone" id="drop-zone">
                  Just drag and drop files here
                </div> 
              </div>
              <div class="col-xs-6">
                <div class="file-preview-frame" ng-show="image && image.imagePreview">
                  <img ng-src="{{image.imagePreview}}" style="width: auto; height: 300px;"/>
                  <div class="file-thumbnail-footer">
                    <div class="file-caption-name" title="{{image.fileName}}" >{{image.fileName}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> <!-- /container -->
</script>	
  </div>

CSS

.upload-drop-zone {
  height: 200px;
  border-width: 2px;
  margin-bottom: 20px;
}

/* skin.css Style*/
.upload-drop-zone {
  color: #ccc;
  border-style: dashed;
  border-color: #ccc;
  line-height: 200px;
  text-align: center
}
.upload-drop-zone.drop {
  color: #222;
  border-color: #222;
}
.file-preview-frame {
  display: table;
  width: 350px;
  height: 300px;
  margin: 8px;
  border: 1px solid #ddd;
  box-shadow: 1px 1px 5px 0 #a2958a;
  padding: 6px;
  text-align: center;
  vertical-align: middle;
}
img {
  vertical-align: middle;
  border: 0;
}

JavaScript

angular.module('fileUploadModule',[])
.directive('fileUploadInput', [function(){
	return {
		restrict : 'E',
		scope : {
			backgroundImage : '='	
		},
		templateUrl : 'templates/file-upload-drop.html',
		link : function($scope, $element, $attrs){

			var uploadForm = jQuery($element).find("#js-upload-files");
			var dropZone = jQuery($element).find("#drop-zone");

			uploadForm.bind('change',function($event) {
				file=$event.currentTarget.files[0];
				$scope.fileReader(file);

			});

			dropZone.on("dragover",function(event){
				console.log(event);
				if (event.originalEvent.dataTransfer) 
					event.originalEvent.dataTransfer.effectAllowed = 'copy';
				$(this).removeClass();
        		$(this).addClass('upload-drop-zone drop');
        		event.preventDefault();

			});
        	dropZone.on("dragleave",function(event){
        		if (event.originalEvent.dataTransfer) 
					event.originalEvent.dataTransfer.effectAllowed = 'copy';
				$(this).removeClass();
        		$(this).addClass('upload-drop-zone');
        		event.preventDefault();
        	});
        	dropZone.on("drop", function(event) {
        		event.preventDefault();
        		$(this).removeClass();
        		$(this).addClass('upload-drop-zone');
        		var file = event.originalEvent.dataTransfer.files[0];
				$scope.fileReader(file);
        	});

        	$scope.fileReader = function(file){
        		$scope.image = {"fileName" : file.name};
        		var reader = new FileReader();
        		reader.onload = function(event) {
        			$scope.$apply(function(	){
          				$scope.image.imagePreview=event.target.result;
          				$scope.backgroundImage = $scope.image.imagePreview;
          				//
        			});
        		}
        		reader.readAsDataURL(file);
        	}

        	$scope.$watch('image', function(newValue) {
        		if(newValue !== undefined) {
        			console.log($scope.image);
        			console.log();
        			
        		}
        	})
		} // link
	} // return...