JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css">
<a class="modal-trigger" href="#create-new-audiogram-modal">Create Audiogram</a>


<!-- Modal Structure -->
<div id="create-new-audiogram-modal" class="modal modal-fixed-footer" style="width: 70%; margin-top: 0px; margin-bottom: 0;">
  <div class="modal-content" style="background: none; border: none; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px;">
    <div class="container" style="height: 100%;">
      <div class="input-field col s12">
        <div id="audiogram-image-upload" class="dropzone">
          <div class="dz-default dz-message">Drag image here or click to upload.</div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal-footer">
    <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Publish</a>
  </div>
</div>

JavaScript

$(document).ready(function() {
  // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
  $('.modal-trigger').leanModal();
});

$('.modal').modal({
  dismissible: true, // Modal can be dismissed by clicking outside of the modal
  opacity: .5, // Opacity of modal background
  in_duration: 300, // Transition in duration
  out_duration: 200, // Transition out duration
  starting_top: '4%', // Starting top style attribute
  ending_top: '10%', // Ending top style attribute
  ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
    alert("Ready");
    console.log(modal, trigger);
  },
  complete: function() {
      alert('Closed');
    } // Callback for Modal close
});


Dropzone.options.myAwesomeDropzone = {
        paramName: "file",
        maxFilesize: 1,
        url: 'UploadImages',
        previewsContainer: "#dz-default dz-message",
        uploadMultiple: true,
        parallelUploads: 5,
        maxFiles: 20,
        init: function () {
            var cd;
            this.on("success", function (file, response) {
                $('.dz-progress').hide();
                $('.dz-size').hide();
                $('.dz-error-mark').hide();
                console.log(response);
                console.log(file);
                cd = response;
            });
            this.on("addedfile", function (file) {
                var removeButton = Dropzone.createElement("<a href=\"#\">Remove file</a>");
                var _this = this;
                removeButton.addEventListener("click", function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    _this.removeFile(file);
                    var name = "largeFileName=" + cd.pi.largePicPath + "&smallFileName=" + cd.pi.smallPicPath;
                    $.ajax({
                        type: 'POST',
                        url: 'DeleteImage',
                        data: name,
...