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>
     <div ng-repeat="item in groups">
     <div>{{item.Name}}</div>
      <input type="text" name="userName" ng-model="item.Name" size="31" required>
      <div>{{item.Description}}</div>
      <input type="text" name="Description" ng-model="item.Description" size="31" required>
      <div>{{item.MediaType}}</div>
         <button ng-disabled="!myForm.$valid" 
              ng-click="uploadPic(item,$index)">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.groups = [{
	"IsImage": true,
	"IsSound": false,
	"IsVideo": false,
	"MediaType": 1,
	"Types": "Image",
	"CreatedDateForJson": "01/04/2016",
	"LastUpdatedDateForJson": "01/04/2016",
	"MediaID": 54036,
	"MediaTypeID": 1,
	"MediaUsageTypeID": 2,
	"MediaUsageTypeIDSpecified": true,
	"Name": "3D cubes",
	"Description": "Dummy",
	"IsDeleted": false,
	"Comments": "",
	"Remark": "test",
	"Blob": "AAAAAA==",
	"FlashBlob": "AAAAAA==",
	"FlashBlobSpecified": true,
	"SnapshotBlob": "AAAAAA==",
	"SnapshotBlobSpecified": true,
	"CreatedDate": "2016-01-04T09:32:23.303",
	"CreatedDateSpecified": true,
	"UserID": 2100,
	"UserIDSpecified": true,
	"MovBlob": "AAAAAA==",
	"MovBlobSpecified": true,
	"T3gBlob": "AAAAAA==",
	"T3gBlobSpecified": true,
	"Mp4Blob": "AAAAAA==",
	"Mp4BlobSpecified": true,
	"OggBlob": "AAAAAA==",
	"OggBlobSpecified": true,
	"WebmBlob": "AAAAAA==",
	"WebmBlobSpecified": true,
	"LastUpdatedDate": "2016-01-04T09:32:23.303",
	"LastUpdatedDateSpecified": true
}, {
	"IsImage": true,
	"IsSound": false,
	"IsVideo": false,
	"MediaType": 1,
	"Types": "Image",
	"CreatedDateForJson": "01/04/2016",
	"LastUpdatedDateForJson": "01/04/2016",
	"MediaID": 54037,
	"MediaTypeID": 1,
	"MediaUsageTypeID": 2,
	"MediaUsageTypeIDSpecified": true,
	"Name": "Coding blue",
	"Description": "Test",
	"IsDeleted": false,
	"Comments": "",
	"Remark": "test",
	"Blob": "AAAAAA==",
	"FlashBlob": "AAAAAA==",
	"FlashBlobSpecified": true,
	"SnapshotBlob": "AAAAAA==",
	"SnapshotBlobSpecified": true,
	"CreatedDate": "2016-01-04T09:32:53.067",
	"CreatedDateSpecified": true,
	"UserID": 2100,
	"UserIDSpecified": true,
	"MovBlob": "AAAAAA==",
	"MovBlobSpecified": true,
	"T3gBlob": "AAAAAA==",
	"T3gBlobSpecified": true,
	"Mp4Blob": "AAAAAA==",
	"Mp4BlobSpecified": true,
	"OggBlob": "AAAAAA==",
	"OggBlobSpecified": true,
	"WebmBlob":...