Atmos
  • Getting Started
  • Build System
    • Gulp
      • Gulp 4
    • Page Structure
    • Sass Modules
  • UI Elements
    • Colors
    • Buttons
    • Icons
    • Cards
    • Alerts
    • Modals
    • Avatar
    • Tables
    • Mail Templates
  • forms
    • Form Layouts
    • Switch
    • Tag Input
    • Radio Box
    • Select2
    • Datepickers
    • Masked Input
    • Rangeslider
    • Dropzone Fileupload
    • Form Wizard
    • Form Validation
  • Charts
    • Charts
    • Apex Charts
    • Chartjs
    • Google Charts
    • Chartist
  • Maps
    • Google Maps
    • Vector Maps
  • Starter Template
    • blank template Markup
Powered by GitBook
On this page
  1. forms

Dropzone Fileupload

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

Step 1

Add dropzone stylesheets before atmos to make sure we override styles to fit our theme

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

Step 2

Include JavaScript file before closing body tag

<script src="assets/vendor/dropzone/dropzone.js" type="text/javascript"></script>

Step 3

Add .dropzone to initialize dropzone plugin with default options.

<form class="dropzone" action="/">
    <div class="dz-message">
        <h1 class="display-4">
            <i class=" mdi mdi-progress-upload"></i>
        </h1>
        Drop files here or click to upload.<BR>
        <SPAN class="note needsclick">(This is just a demo dropzone. Selected
        files are <STRONG>not</STRONG> actually uploaded.)</SPAN>
        <div class="p-t-5">
            <a href="#" class="btn btn-lg btn-primary">Upload File</a>

        </div>
    </div>
</form>
PreviousRangesliderNextForm Wizard

Last updated 6 years ago

Dropzone.js
Logo