snitchbot | Dashboard & Remote Field Sensing

Dropzone

DropzoneJS is an open-source library that provides drag & drop file uploads with image previews.

Single File Upload

Dropzone requires a valid server-side url for the file upload. You can easily pass it through data-options attribute.

data-options!={ url: 'valid/url'}

Drop your file here

<div class="dropzone dropzone-single p-0" data-dropzone data-options='{"url":"valid/url","maxFiles":1,"dictDefaultMessage":"Choose or Drop a file here"}'>
  <div class="fallback">
    <input type="file" name="file">
  </div>
  <div class="dz-preview dz-preview-single">
    <div class="dz-preview-cover dz-complete"><img class="dz-preview-img" src="..." alt="..." data-dz-thumbnail=""><a class="dz-remove text-danger" href="#!" data-dz-remove><span class="fas fa-times"></span></a>
      <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress=""></span></div>
    </div>
  </div>
  <div class="dz-message" data-dz-message>
    <div class="dz-message-text"><img class="mr-2" src="../assets/img/icons/cloud-upload.svg" width="25" alt="">Drop your file here</div>
  </div>
</div>

Multiple File Upload

Drop your files here

<div class="dropzone dropzone-multiple p-0" data-dropzone data-options='{"url":"valid/url"}'>
  <div class="fallback">
    <input type="file" name="file2">
  </div>
  <div class="dz-message" data-dz-message> <img class="mr-2" src="../assets/img/icons/cloud-upload.svg" width="25" alt="">Drop your files here</div>
  <div class="dz-preview dz-preview-multiple m-0 d-flex flex-column">
    <div class="media align-items-center mb-3 pb-3 border-bottom btn-reveal-trigger"><img class="dz-image" src="..." alt="..." data-dz-thumbnail>
      <div class="media-body d-flex flex-between-center">
        <div>
          <h6 data-dz-name></h6>
          <div class="d-flex align-items-center">
            <p class="mb-0 fs--1 text-400 line-height-1" data-dz-size></p>
            <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress=""></span></div>
          </div>
        </div>
        <div class="dropdown text-sans-serif">
          <button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal dropdown-caret-none" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h"></span></button>
          <div class="dropdown-menu dropdown-menu-right border py-0">
            <div class="bg-white py-2"><a class="dropdown-item" href="#!" data-dz-remove>Remove File </a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Stylesheet

<link href="assets/lib/dropzone/dropzone.min.css" rel="stylesheet">

Javascript

<script src="assets/lib/dropzone/dropzone.min.js"></script>