Atmos
Search…
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
1
<link rel="stylesheet" href="assets/vendor/dropzone/dropzone.css">
Copied!

Step 2

Include JavaScript file before closing body tag
1
<script src="assets/vendor/dropzone/dropzone.js" type="text/javascript"></script>
Copied!

Step 3

Add .dropzone to initialize dropzone plugin with default options.
1
<form class="dropzone" action="/">
2
<div class="dz-message">
3
<h1 class="display-4">
4
<i class=" mdi mdi-progress-upload"></i>
5
</h1>
6
Drop files here or click to upload.<BR>
7
<SPAN class="note needsclick">(This is just a demo dropzone. Selected
8
files are <STRONG>not</STRONG> actually uploaded.)</SPAN>
9
<div class="p-t-5">
10
<a href="#" class="btn btn-lg btn-primary">Upload File</a>
11
12
</div>
13
</div>
14
</form>
Copied!
Dropzone.js
Last modified 2yr ago
Copy link