fruitstudios / uploadit
Front-end asset upload for fields, volumes and folders.
Installs: 976
Dependents: 0
Suggesters: 0
Security: 0
Stars: 8
Watchers: 4
Forks: 1
Open Issues: 1
Type:craft-plugin
Requires
- craftcms/cms: ^3.0.2
This package is auto-updated.
Last update: 2024-12-24 00:44:13 UTC
README
The unausuming front end asset uploader for Craft 3. Use as a standalone uploader or as field in one of your forms:
Features:
- Drop to upload
- Reorder & remove uploads
- Asset previews
- Customisable
- It's Vanilla (Zero dependencies writtin in battle tested javascript)
Requirements
This plugin requires Craft CMS 3.0.0-RC1 or later.
Installation
To install the plugin, follow these steps:
-
Install with Composer via:
composer require fruitstudios/uploadit
-
In the Control Panel, go to Settings → Plugins and click the “Install” button for Uploadit.
Using Uploadit
Options
{{ craft.uploadit.uploader({
id: 'myUid',
name: 'myFieldName',
assets: [],
field: 'images',
element: entry,
volume: 'myvolume',
folder: 'my/folder/path',
preview: 'image',
transform: 'square',
limit: 5,
allowReorder: true,
allowRemove: true,
customClass: 'custom--class',
}) }}
id
option
To drag elements from one list into another, both lists must have the same group
value.
You can also define whether lists can give away, give and keep a copy (clone
), and receive elements.
- name:
String
— group name - pull:
true|false|'clone'|function
— ability to move from the list.clone
— copy the item, rather than move. - put:
true|false|["foo", "bar"]|function
— whether elements can be added from other lists, or an array of group names from which elements can be taken. - revertClone:
boolean
— revert cloned element to initial position after moving to a another list.
name
option
To drag elements from one list into another, both lists must have the same group
value.
You can also define whether lists can give away, give and keep a copy (clone
), and receive elements.
- name:
String
— group name - pull:
true|false|'clone'|function
— ability to move from the list.clone
— copy the item, rather than move. - put:
true|false|["foo", "bar"]|function
— whether elements can be added from other lists, or an array of group names from which elements can be taken. - revertClone:
boolean
— revert cloned element to initial position after moving to a another list.
assets
option
To drag elements from one list into another, both lists must have the same group
value.
You can also define whether lists can give away, give and keep a copy (clone
), and receive elements.
- name:
String
— group name - pull:
true|false|'clone'|function
— ability to move from the list.clone
— copy the item, rather than move. - put:
true|false|["foo", "bar"]|function
— whether elements can be added from other lists, or an array of group names from which elements can be taken. - revertClone:
boolean
— revert cloned element to initial position after moving to a another list.
field
option
To drag elements from one list into another, both lists must have the same group
value.
You can also define whether lists can give away, give and keep a copy (clone
), and receive elements.
- name:
String
— group name - pull:
true|false|'clone'|function
— ability to move from the list.clone
— copy the item, rather than move. - put:
true|false|["foo", "bar"]|function
— whether elements can be added from other lists, or an array of group names from which elements can be taken. - revertClone:
boolean
— revert cloned element to initial position after moving to a another list.
element
option
To drag elements from one list into another, both lists must have the same group
value.
You can also define whether lists can give away, give and keep a copy (clone
), and receive elements.
- name:
String
— group name - pull:
true|false|'clone'|function
— ability to move from the list.clone
— copy the item, rather than move. - put:
true|false|["foo", "bar"]|function
— whether elements can be added from other lists, or an array of group names from which elements can be taken. - revertClone:
boolean
— revert cloned element to initial position after moving to a another list.
volume
option
To drag elements from one list into another, both lists must have the same group
value.
You can also define whether lists can give away, give and keep a copy (clone
), and receive elements.
- name:
String
— group name - pull:
true|false|'clone'|function
— ability to move from the list.clone
— copy the item, rather than move. - put:
true|false|["foo", "bar"]|function
— whether elements can be added from other lists, or an array of group names from which elements can be taken. - revertClone:
boolean
— revert cloned element to initial position after moving to a another list.
Example Standalone Usage
{{ craft.uploadit.uploader({
id: 'myUid',
name: 'myFieldName',
assets: [],
volume: 'myvolume',
folder: 'my/folder/path',
preview: 'image',
transform: 'square',
themeColour: '#ff00ff',
}) }}
Example Form Usage
{{ craft.uploadit.uploader({
id: 'myUid',
name: 'myFieldName',
assets: [],
field: 'images',
element: 345678,
preview: 'image',
transform: 'square',
themeColour: '#ff00ff',
}) }}
Roadmap
- Better validation
- Translate javascript strings
Note: This plugin will become a paid add-on when the Craft Plugin store becomes available.
Brought to you by FRUIT