Drag-and-Drop File Upload

Forked from http://jsfiddle.net/danialfarid/s8kc7wg0/400/

by Prajeesh_PR

HTML

<script src="http://angular-file-upload.appspot.com/js/ng-file-upload-shim.js"></script>
<script src="http://angular-file-upload.appspot.com/js/ng-file-upload.js"></script>
<div ng-app="fileUpload" ng-controller="MyCtrl">
<!--
    Username
<input type="text" ng-model="username"><br/><br/>
    watching model:
    <div class="button" ngf-select ng-model="file" ngf-multiple="false">Select File</div>
    on file change multiple:
    <div class="button" ngf-select="upload($files)" ngf-multiple="true">Select File</div>
    Drop File:
-->
<div ngf-drop  ng-model="files" class="drop-box" 
        ngf-drag-over-class="'dragover'" ngf-multiple="true" ngf-allow-dir="true"
        accept="image/*,application/pdf" 
        ngf-pattern="'image/*,application/pdf'">Drop pdf or image files<br/></br/>or click to upload</div>
    <div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>
    Files:
    <ul>
        <li ng-repeat="f in files" style="font:smaller">{{f.name}} {{f.$error}} {{f.$errorParam}}</li>
    </ul>
    Upload Log:
    <pre>{{log}}</pre>
</div>
</div>

CSS

.button {
    -moz-appearance: button;
    /* Firefox */
    -webkit-appearance: button;
    /* Safari and Chrome */
    padding: 10px;
    margin: 10px;
    width: 70px;
}
.drop-box {
    background: #F8F8F8;
    border: 5px dashed #DDD;
    width: 200px;
    height: 65px;
    text-align: center;
    padding-top: 25px;
    margin: 10px;
    line-height: 12px;
    color: #999999;
    font-family: Arial;
}
.dragover {
    border: 5px dotted #333333;
    color: #333333;
}
.drop-box:hover {
    border: 5px dashed #666666;
    color: #666666;
}

JavaScript

//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
    $scope.$watch('files', function () {
        $scope.upload($scope.files);
    });
    $scope.$watch('file', function () {
        if ($scope.file != null) {
            $scope.files = [$scope.file]; 
        }
    });
    $scope.log = '';

    $scope.upload = function (files) {
        if (files && files.length) {
            for (var i = 0; i < files.length; i++) {
              var file = files[i];
              if (!file.$error) {
                Upload.upload({
                    url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
                    data: {
                      username: $scope.username,
                      file: file  
                    }
                }).then(function (resp) {
                    $timeout(function() {
                        $scope.log = 'file: ' +
                        resp.config.data.file.name +
                        ', Response: ' + JSON.stringify(resp.data) +
                        '\n' + $scope.log;
                    });
                }, null, function (evt) {
                    var progressPercentage = parseInt(100.0 *
                    		evt.loaded / evt.total);
                    $scope.log = 'progress: ' + progressPercentage + 
                    	'% ' + evt.config.data.file.name + '\n' + 
                      $scope.log;
                });
              }
            }
        }
    };
}]);