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>
<script>
 FileAPI = {forceLoad: true, html5: false}
</script>
<body ng-app="fileUpload" ng-controller="MyCtrl">
  <legend>Upload on file select</legend>
  <button type="file" ngf-select="uploadFiles($files)" multiple
          accept="image/*" ngf-max-height="1000" ngf-max-size="4M">
      Select Files</button>
  <br>
  Files:
  <ul>
    <li ng-repeat="f in files" style="font:smaller">{{f.name}}
      <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;
        angular.forEach(files, function(file) {
            if (file) {
         		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));
                });
    		}   
        });
    }
}]);