JSFiddle - React, Tailwind, and code Playground

by Premchand R

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">
  <form name="myForm">
    <fieldset>
      <legend>Upload on form submit</legend>
      Username:
      <div ng-repeat="item in values">
        <input type="text" name="userName" ng-model="item" size="31" required>
        <i ng-show="myForm.userName.$error.required">*required</i>
        <button ng-disabled="!myForm.$valid" ng-click="uploadPic(item)">Submit</button>
      </div>


    </fieldset>
    <br>
  </form>
</body>

CSS

.thumb {
  width: 200px;
  height: 120px;
  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', []);

app.controller('MyCtrl', ['$scope', function($scope) {
  $scope.values = [1, 2, 4, 3];
  $scope.getvalue = '';
  $scope.uploadPic = function(item) {
    alert(item);
    $scope.getvalue = item;
    alert($scope.getvalue)
  }
}]);