JSFiddle - React, Tailwind, and code Playground

by ipark

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<sciprt src="https://raw.githubusercontent.com/danialfarid/ng-file-upload/master/dist/ng-file-upload.min.js"></sciprt>

<div class="container" ng-app="app" ng-controller="uploadCtrl">
  <form name="form">
    <img class="thumb" ngf-thumbnail="file" /><br/>
    <button class="btn btn-primary" ngf-select name="image" ngf-accept="'image/*'">
    Select
    </button>
    <button class="btn btn-success" type="submit" ng-click="click()">
    Submit
    </button>
  </form>
</div>

CSS

.thumb {
  min-width: 150px;
  min-height: 100px;
  border: 1px solid black;
  border-radius: 8px;
  margin: 15px;
}

JavaScript

angular.module("app", ["ngFileUpload"])
.controller("uploadCtrl", function($scope, Upload) {
  
});