Bootstrap 4 Advanced Components : DropzoneJS for Bootstrap 4 Daemonite

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

by Oscar Daniel Requena Seijas

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">
        
        <h2>Demo</h2>
        <p>
        You already know the standard Bootstrap file upload form
        </p>
        <div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>
<p class="mt-5">
And here is your new drag n drop element
</p>
        <form action="/file-upload" class="dropzone dz-clickable" id="my-dropzone">
          <div class="dz-message d-flex flex-column">
            <i class="material-icons text-muted">cloud_upload</i>
            Drag &amp; Drop here or click
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

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
  });

});