JSFiddle - React, Tailwind, and code Playground

by Wouter Vos

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.2.13/ng-file-upload-shim.min.js"></script>
<form name="ctrl" ng-app="app">
  <div class="container">
      <div class="row text-center">
        <div ngf-select ng-model="file" ng-change="customUpload()" class="block main">
          Alternative upload button
          <div>File meta data: name, status {{ctrl.formData.file}}</div>
          <div>Is also an drag-and-drop area</div>
        </div>
      </div>
  </div>
</form>

CSS

.block {
    width: 200px;
    height: 200px;
    display: inline-block;
}
.white {
    background-color: white;
}
.main {
    background-color: aqua;
}

JavaScript

var app = angular.module('app', [
    'ngFileUpload'
]);

app.controller("ctrl", ["$scope", function($scope) {
	$scope.file = {};
  $scope.customUpload = function() {
  	// Upload the file in ctrl.formData.file
  };
}]);