> For the complete documentation index, see [llms.txt](https://docs.atomui.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.atomui.com/form-elements/dropzone-fileupload.md).

# 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

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

#### Step 2

Include JavaScript file before closing body tag

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

#### Step 3

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

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

{% embed url="<https://www.dropzonejs.com/>" %}
