file-uploader
Uploads files to Shopify and adds their names, gids and admin links to the cart line.
At a glance
is-dragover
A file is dragged over
- On
file-uploader- Use it
- To highlight the drop area.
is-uploading
A file is uploading
- On
file-uploaderand the item.- Shows
upload="progress"counts up. The form waits before adding to the cart.
has-files · is-done
The file is uploaded
- On
has-filesonfile-uploader,is-doneon the item,is-imagefor an image.- Shows
- The name, the size and, with
data-preview, the preview.
is-full
The limit is reached
- On
file-uploader- When
- It holds as many files as
data-multipleallows, here 3.
is-invalid
A file is refused
- On
file-uploader- Shows
upload="errors", with each refused file and why.
is-error
The upload failed
- On
- The item.
- Shows
- Its
upload="error": why this file failed.
More in the guide.
Where it can go
- Inside any of:
smootify-add-to-cart,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 | upload | 10 |