# File Upload

[DropzoneJS](http://www.dropzonejs.com/) is an open source library that provides drag'n'drop file uploads with image previews.

{% hint style="info" %}
Please refer to [DropzoneJS Documentation](http://www.dropzonejs.com/) to learn about plugin options
{% endhint %}

**Step one**

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

```markup
<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.

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

**Step three**

Add `.dropzone` to initialize dropzone plugin with default options.

![](https://3396288764-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDBWrdKcsIL5-tSGnv_%2F-LEA0W1liQGAViyId6y0%2F-LEA0XYfG3NRTmGrYI2W%2FScreen%20Shot%202018-06-04%20at%207.09.11%20PM.png?alt=media\&token=5c43fe4d-10ea-4469-835b-03a730b6fff3)

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