# Advanced file uploader

> The drag-and-drop uploader formclick.min.js builds from every file input: multiple files, progress bars, retries, size and type limits, and styling.

Source: https://docs.formclick.io/html-forms/advanced-file-uploader

> **Pro and Business plans:** File uploads are available on the Pro and Business plans.

You don’t need an upload widget or a third-party service. Add a normal `<input type="file">` and `formclick.min.js` turns it into a full uploader.

_Animation: a file input becomes a drag-and-drop zone; each file shows its own progress bar and a check mark when uploaded. Drop files or browse, see each file’s progress, remove mistakes before sending._

## What it does

- **Drag and drop** onto the zone, or click **Browse files**.
- **One or many files:** add `multiple` to accept several files in one field. Without it, a new file replaces the previous one.
- **Checks before uploading:** files over the size limit or not matching `accept` are rejected straight away with a clear message.
- **Skips duplicates:** the same file (same name and size) is only added once.
- **Remove button** on each file until the form is sent.
- **Parallel uploads** with a progress bar for every file.
- **Automatic retries:** up to 3 attempts with increasing delays if the connection drops.
- **Direct to storage:** files go straight to secure storage, not through the form endpoint, so large files don’t slow down the submission.
- **Resets** after a successful submit, ready for the next visitor.

## Options

| Attribute | Example | Effect |
| --- | --- | --- |
| `name` | `name="resume"` | Field the file (or list of files) is saved under. |
| `multiple` | `multiple` | Allow several files in this field. |
| `accept` | `accept=".pdf,.docx"` or `accept="image/*"` | Allowed extensions or MIME types. |
| `data-max-size` | `data-max-size="2097152"` | A lower size limit, in bytes (here 2 MB). The limit can’t go above 5 MB. |

```html title="apply.html"
<form action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="email" name="email" required>

  <!-- One PDF, max 2 MB -->
  <input type="file" name="cover_letter" accept=".pdf" data-max-size="2097152">

  <!-- Up to many images, 5 MB each -->
  <input type="file" name="photos" accept="image/*" multiple>

  <button type="submit">Send</button>
</form>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>
```

## Allowed file types

Whatever you set in `accept`, the server only stores these types: images (JPEG, PNG, GIF, WebP, SVG, TIFF), PDF, Word, Excel, PowerPoint, plain text, CSV and ZIP.

## Styling

The uploader injects light default styles. Override any of these classes in your own CSS:

| Class | Element |
| --- | --- |
| `.fc-upload-zone` | The drop zone. Adds `.fc-drag-over` while dragging, `.fc-has-files` with files, `.fc-error-zone` on an error. |
| `.fc-upload-hint`, `.fc-upload-meta`, `.fc-upload-browse` | Hint text, limits text and the Browse button. |
| `.fc-file-item` | One file row. Has `.fc-file-name`, `.fc-file-size`, `.fc-file-status` and `.fc-file-remove`. |
| `.fc-progress-wrap`, `.fc-progress-bar` | The progress track and bar. |
| `.fc-zone-error` | Error message under the zone. |

```html
<style>
  .fc-upload-zone { border-radius: 14px; border-color: #c7d2fe; }
  .fc-upload-zone.fc-drag-over { border-color: #645cec; background: #f6f5ff; }
  .fc-progress-bar { background: #645cec; }
</style>
```

How files reach you after upload is covered in [File attachments](https://docs.formclick.io/html-forms/file-attachments).