JSFiddle - React, Tailwind, and code Playground

by danialfarid

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload-shim.js"></script>
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload.js"></script>
<body ng-app="fileUpload" ng-controller="MyCtrl">
     <h4>Upload on file select</h4>

    <button ngf-select="uploadFiles($files)" ngf-keep="true" multiple accept="image/*" ngf-max-height="10000" ngf-max-size="10MB">Select Files</button>
    <br>
    <br>Files:
    <ul>
        <li ng-repeat="f in files" style="font:smaller">{{f.name}} {{f.$error}} {{f.$errorParam}} <span class="progress" ng-show="f.progress >= 0">
        <div style="width:{{f.progress}}%"  
            ng-bind="f.progress + '%'"></div>
      </span>

        </li>
    </ul>{{errorMsg}}</body>

CSS

.thumb {
    width: 24px;
    height: 24px;
    float: none;
    position: relative;
    top: 7px;
}
form .progress {
    line-height: 15px;
}
}
.progress {
    display: inline-block;
    width: 100px;
    border: 3px groove #CCC;
}
.progress div {
    font-size: smaller;
    background: orange;
    width: 0;
}

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.uploadFiles = function(files) {
        $scope.files = files;
        console.log(files);
        angular.forEach(files, function(file) {
            if (file && !file.$error) {
         		file.upload = Upload.upload({
                  url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
                  file: file
                });

                file.upload.then(function (response) {
                  $timeout(function () {
                    file.result = response.data;
                  });
                }, function (response) {
                  if (response.status > 0)
                    $scope.errorMsg = response.status + ': ' + response.data;
                });

                file.upload.progress(function (evt) {
                  file.progress = Math.min(100, parseInt(100.0 * 
                                           evt.loaded / evt.total));
                });
    		}   
        });
    }
}]);