Skip to content

Instantly share code, notes, and snippets.

@webkenny
Created June 17, 2016 06:31
Show Gist options
  • Save webkenny/30a5eef1a9a22f8123e05dae62c4ea94 to your computer and use it in GitHub Desktop.
Save webkenny/30a5eef1a9a22f8123e05dae62c4ea94 to your computer and use it in GitHub Desktop.
Using Dropzone with Bootstrap
$(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 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment