Using Dropzone with Bootstrap

dropzone.js

$(document).ready(function () {
    var previewNode = document.querySelector("#template");
    previewNode.id = "";
    var previewTemplate = previewNode.parentNode.innerHTML;
    previewNode.parentNode.removeChild(previewNode);

    var eventsDropzone = new Dropzone(document.body, {

        // The configuration we've talked about above
        thumbnailWidth: 80,
        thumbnailHeight: 80,
        parallelUploads: 20,
        previewTemplate: previewTemplate,
        autoQueue: false, // Make sure the files aren't queued until manually added
        autoProcessQueue: false,
        previewsContainer: "#previews", // Define the container to display the previews
        clickable: false, // Define the element that should be used as click trigger to select files.

        // The setting up of the dropzone
        init: function() {
            var myDropzone = this;

            // First change the button to actually tell Dropzone to process the queue.
            this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
                // Make sure that the form isn't actually being sent.
                e.preventDefault();
                e.stopPropagation();
                myDropzone.processQueue();
            });

            // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
            // of the sending event because uploadMultiple is set to true.
            this.on("sendingmultiple", function () {
                // Gets triggered when the form is actually being sent.
                // Hide the success button or the complete form.
            });
            this.on("successmultiple", function (files, response) {
                // Gets triggered when the files have successfully been sent.
                // Redirect user or notify of success.
            });
            this.on("errormultiple", function (files, response) {
                // Gets triggered when there was an error sending the files.
                // Maybe show form again, and notify user of error
            });
        }
    }
  )
});

form.html

<form method="POST" action="http://ths.local/events" accept-charset="UTF-8" id="events-dropzone"
      enctype="multipart/form-data"><input name="_token" type="hidden" value="H8k8NlsgmBLwHKPeanZNB6wHCYqBJaQmXeHortEL">
    <div class="row">
        <div class="col-sm-7">
            <div class="form-group">
                <label for="title" class="control-label">Title</label>
                <input class="form-control" name="title" type="text" value="" id="title">
            </div>
            <div class="form-group">
                <label for="meeting_type" class="control-label">Meeting Type</label>
                <select class="form-control" id="meeting_type" name="meeting_type">
                    <option selected="selected" value="">Select One</option>
                    <option value="0">Advisory and Finance Committee</option>
                    <option value="1">Budget Committee</option>
                    <option value="2">Board of Appeals</option>
                    <option value="3">City Council</option>
                    <option value="4">Community Programs</option>
                    <option value="5">Conservation Commission</option>
                    <option value="6">Heritage Commission</option>
                    <option value="7">House</option>
                    <option value="8">Selectmen</option>
                    <option value="9">Senate</option>
                    <option value="10">Zoning Board</option>
                    <option value="11">Other</option>
                </select></div>
            <div class="form-group past-event">
                <label>
                    <input id="past" name="past" type="checkbox" value="1">
                    Check this box if the event has already happened.
                </label>
            </div>
            <div class="form-group">
                <label for="event_start" class="control-label">Event Start</label>
                <input type="datetime-local" name="event_start" class="event-time form-control">
            </div>
            <div class="form-group">
                <label for="event_end" class="control-label">Event End</label>
                <input type="datetime-local" name="event_end" class="event-time form-control">
            </div>
            <div class="broadcast">
                <div class="form-group">
                    <label for="broadcast_start" class="control-label">Broadcast Start</label>
                    <input type="datetime-local" name="broadcast_start" class="event-time form-control">
                </div>
                <div class="form-group">
                    <label for="broadcast_end" class="control-label">Broadcast End</label>
                    <input type="datetime-local" name="broadcast_end" class="event-time form-control">
                </div>
            </div>
            <input class="form-control btn btn-success" type="submit" value="Schedule Event">
        </div>
        <div class="col-sm-5">
            <div class="form-group form-callout">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Video Editing Controls</h3>
                    </div>
                    <div class="panel-body">
                        <p>Edit your video here by setting a start and end time for it to play.</p>
                        <label for="video_start" class="control-label">Video Start</label>
                        <input class="form-control" name="video_start" type="text" value="" id="video_start">
                        <label for="video_end" class="control-label">Video End</label>
                        <input class="form-control" name="video_end" type="text" value="" id="video_end">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>Agenda/Meeting Notes</label>
                <!-- HTML heavily inspired by http://blueimp.github.io/jQuery-File-Upload/ -->
                <div class="table table-striped" class="files" id="previews">

                    <div id="template" class="file-row">
                        <!-- This is used as the file preview template -->
                        <div>
                            <span class="preview"><img data-dz-thumbnail/></span>
                        </div>
                        <div>
                            <p class="name" data-dz-name></p>
                            <strong class="error text-danger" data-dz-errormessage></strong>
                        </div>
                        <div>
                            <p class="size" data-dz-size></p>
                            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0"
                                 aria-valuemax="100" aria-valuenow="0">
                                <div class="progress-bar progress-bar-success" style="width:0%;"
                                     data-dz-uploadprogress></div>
                            </div>
                        </div>
                        <div>
                            <button class="btn btn-primary start">
                                <i class="glyphicon glyphicon-upload"></i>
                                <span>Start</span>
                            </button>
                            <button data-dz-remove class="btn btn-warning cancel">
                                <i class="glyphicon glyphicon-ban-circle"></i>
                                <span>Cancel</span>
                            </button>
                            <button data-dz-remove class="btn btn-danger delete">
                                <i class="glyphicon glyphicon-trash"></i>
                                <span>Delete</span>
                            </button>
                        </div>
                    </div>

                </div>
            </div>
            <div class="form-group has-feedback">
                <label for="password" class="control-label">Password</label>
                <input type="password" name="password" class="form-control">
                <span class="glyphicon glyphicon-eye-close form-control-feedback"
                      title="Show or hide the password"></span>
                <span class="instructions">By setting a password, your event will not be available to the public and will require a direct link with a provided password.</span>
            </div>
        </div>
    </div>
</form>