Bootstrap 4 Advanced Components : DropzoneJS for Bootstrap 4 Daemonite

Bootstrap 4 Advanced Components : DropzoneJS plugin for Bootstrap 4 and Daemonite material UI

by dshilkret

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/enyo/dropzone/master/dist/dropzone.css">
<link rel="stylesheet" href="https://daemonite.github.io/material/css/material.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://daemonite.github.io/material/js/material.min.js"></script>
<script src="https://cdn.rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,500i,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="jumbotron">
        <h1>DropzoneJS plugin for Bootstrap 4 - Advanced Components with daemonite material UI (WIP)</h1>
        <p class="lead">by djibe.</p>
        <p class="text-muted">(thx to BS4 + Daemonite Material Design)</p>
        <p>
          Dropzone is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars,<br>a creation of
          <a href="https://github.com/enyo/dropzone/" target="_blank">enyo</a>.<br>
        </p>
        <p class="lead">
          If you see this page unstyled, press Ctrl + F5 to reload it.
        </p>
        <h2>Setup</h2>
        <ol>
          <li>
            Add <code>
              &lt;link rel="stylesheet" href="https://cdn.rawgit.com/enyo/dropzone/master/dist/dropzone.css"&gt;
            </code> before your bootstrap css.
          </li>
          <li>Add dropzone.js to your page AFTER bootstrap.min.js<br>
            <code>&lt;script src="https://cdn.rawgit.com/enyo/dropzone/master/dist/dropzone.js">&lt;/script></code>
          </li>
          <li>
            DropzoneJS won't do any...

CSS

/* Just add this CSS to your project */

.dropzone {
  border: 2px dashed #dedede;
  border-radius: 5px;
  background: #f5f5f5;
}

.dropzone i{
  font-size: 5rem;
}

.dropzone .dz-message {
  color: rgba(0,0,0,.54);
  font-weight: 500;
  font-size: initial;
  text-transform: uppercase;
}

JavaScript

$(function() {
  $("#my-dropzone").dropzone({
    //url: "/file/post", // If not using a form element
  });

});