Pages UI
v5.0.1 - Pages HTML
v5.0.1 - Pages Angularv5.0.1 - Pages HTML
v5.0.1 - Pages HTML
v5.0.1 - Pages Angularv5.0.1 - Pages HTML
  • Getting Started
  • Introduction
    • Layouts
    • Themes
    • Sass
    • Content
  • Apps
    • Calendar
    • Social
    • Email
  • API Reference
  • UI Elements
    • Color
    • Typopgrahy
    • Icons
    • Buttons
    • Notifications
    • Modals
    • Progressbar
    • Collapse
    • Tabs
    • Sliders
    • Treeview
    • Nestable
  • Form Elements
    • Checkboxes and Radio
    • Toggle
    • Typehead
    • Selectbox
    • Datepicker
    • Masked Input
    • Autonumeric
    • Quill Editor
    • Tags Input
    • File Upload
  • Form Layouts
  • Form Validation
  • Form Wizard
  • Charts
  • Maps
    • Google Maps
    • Vector Maps
  • Tables
  • Cards
  • Timeline
  • Views
  • Grid
  • Helpers
  • Troubleshooting
  • Browser Support
  • Change log
  • Legacy Docs
  • Other
    • Grunt
    • Gulp
    • Rails
Powered by GitBook
On this page
  1. Form Elements

File Upload

PreviousTags InputNextForm Layouts

Last updated 6 years ago

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

Please refer to DropzoneJS Documentation to learn about plugin options

Step one

Include the stylesheet dropzone.css inside the <head> if it's not there already.

<link type="text/css" rel="stylesheet" href="assets/plugins/dropzone/css/dropzone.css">

Step two

Include the javascript file inside the <body>before core template script inclusions, if it's not there already.

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

Step three

Add .dropzone to initialize dropzone plugin with default options.

<form action="/file-upload" class="dropzone">
    <div class="fallback">
        <input name="file" type="file" multiple />
    </div>
</form>