fruitstudios/uploadit

Front-end asset upload for fields, volumes and folders.

Uploadit plugin for Craft CMS 3.x

The unausuming front end asset uploader for Craft 3. Use as a standalone uploader or as field in one of your forms:, _(*1)

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., _(*2)

Installation

To install the plugin, follow these steps:, _(*3)

1. Install with Composer via:, _(*4)

   composer require fruitstudios/uploadit

2. In the Control Panel, go to Settings → Plugins and click the “Install” button for Uploadit., _(*5)

Using Uploadit

Options, _(*6)

{{ 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., _(*7)

• 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., _(*8)

• 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., _(*9)

• 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., _(*10)

• 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., _(*11)

• 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., _(*12)

• 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, _(*13)

{{ craft.uploadit.uploader({
    id: 'myUid',
    name: 'myFieldName',
    assets: [],
    volume: 'myvolume',
    folder: 'my/folder/path',
    preview: 'image',
    transform: 'square',
    themeColour: '#ff00ff',
}) }}

, _(*14)

Example Form Usage, _(*15)

{{ craft.uploadit.uploader({
    id: 'myUid',
    name: 'myFieldName',
    assets: [],
    field: 'images',
    element: 345678,
    preview: 'image',
    transform: 'square',
    themeColour: '#ff00ff',
}) }}

, _(*16)

Roadmap

• [ ] Better validation
• [ ] Translate javascript strings

Note: This plugin will become a paid add-on when the Craft Plugin store becomes available., _(*17)

Brought to you by FRUIT, _(*18)