JSFiddle - React, Tailwind, and code Playground

by gkohen

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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.8/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.8/angular-material.js"></script>
<body ng-app="fileUpload" ng-controller="MyCtrl">
  <div align=column>
      <span>Upload test with md-model-options</span>
      <md-button class="md-raised md-primary"
				ngf-select
			>Select</md-button>
      <i ng-show="myForm.userName.$error.required">*required</i>
      <br>Photo:
      <div type="file" ngf-select ng-model="picFile" name="file"    
             accept="image/*" ngf-max-size="2MB" required
             ngf-model-invalid="errorFile">

      <img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb"> <button ng-click="picFile = null" ng-show="picFile">Remove</button>
      <br>
      <button ng-disabled="!myForm.$valid" 
              ng-click="uploadPic(picFile)">Submit</button>
                <div flex
                     class="upload-placeholder-image-preview"
                     ngf-background="imageFile"></div>

 
    <br>
  </div>
</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) {

}]);