JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.js"></script>
<h1>file upload</h1>

    <form role="form" class="form" onsubmit="return false;">
      <div class="form-group">
        <label for="file">File</label>
        <input id="file" type="file" class="form-control"/>
      </div>
      <button id="upload" type="button" class="btn btn-primary">Upload</button>
    </form>

<div id="output" class="container"></div>

JavaScript

(function () {
        var output = document.getElementById('output');
        document.getElementById('upload').onclick = function () {
          var data = new FormData();
          data.append('foo', 'bar');
          data.append('file', document.getElementById('file').files[0]);
          var config = {
            onUploadProgress: function(progressEvent) {
              var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
              document.getElementById('output').innerHTML = percentCompleted;
            }
          };
          axios.put('/upload/server', data, config)
            .then(function (res) {
              output.className = 'container';
              output.innerHTML = res.data;
            })
            .catch(function (err) {
              output.className = 'container text-danger';
              output.innerHTML = err.message;
            });
        };
      })();