# file-uploader

> Uploads files to Shopify and adds their names, gids and admin links to the cart line.

Status: Ready (Smootify 2.0)  
Plan: Server plan  
Add-on: Product File Upload  
URL: https://www.smootify.io/docs/reference/elements/file-uploader  
Updated: 2026-10-13

## At a glance

| Class | On | When |
|---|---|---|
| `is-dragover` | `file-uploader` | a file is dragged over it |
| `is-uploading` | `file-uploader` and the item | a file is uploading: `upload="progress"` counts up, and the form waits for it before adding to the cart |
| `has-files`, `is-done`, `is-image` | `has-files` on `file-uploader`; `is-done` on the item, and `is-image` when it is an image | the file is uploaded: the item shows its name, size and, with `data-preview`, the preview |
| `is-full` | `file-uploader` | the file limit of `data-multiple` is reached |
| `is-invalid` | `file-uploader` | a file was refused: `upload="errors"` shows each refused file and why, such as "page.html: File is of invalid type" |
| `is-error` | the item | the upload failed: its `upload="error"` shows why, such as "Error during upload" |

More in [the guide](https://www.smootify.io/docs/features/file-uploads).

## Where it can go

- **Inside any of:** [`smootify-add-to-cart`](https://www.smootify.io/docs/reference/elements/smootify-add-to-cart), [`dynamic-property`](https://www.smootify.io/docs/reference/elements/dynamic-property).
- **Out of place,** it stays in the page and does nothing: not checked: uploads, but no cart line gets the fields.

## What it requires

- The **server plan**: on other plans Smootify removes the element from the page.
- The **Product File Upload** extension (server plan, the extension activated in the Smootify dashboard, the licensed domain). Without it, the element does nothing.

## Fields in the form

Each field’s **Name** setting in Webflow tells Smootify what the field holds. It is a setting of the field, not a custom attribute.

| Name | Field | What it does |
|---|---|---|
| the element’s `name`, else its `input[type="file"]`’s | file | The field the uploaded files are sent under; the file input itself loses its name. |

## Attributes on the element

- **It reads** `name`, `data-multiple`, `data-required`, `data-preview`, `data-only-images`, `min-file-size`, `max-file-size`, `min-resolution`, `data-error-<code>`.

## Attributes inside it

| Group | Attribute name | Values |
|---|---|---|
| [File upload](https://www.smootify.io/docs/reference/attributes/upload) | `upload` | 10 |