silverstripe/kickassets

Provides an alternative file management interface for SilverStripe CMS with drag-and-drop, multi-selection, and several other desktop-like UI conventions.

KickAssets 3 for SilverStripe

KickAssets is a replacement for the Files & Images section (AssetAdmin) in SilverStripe CMS. It adds drag-and-drop uploading, mouse and keyboard selection, and a variety of other desktop-like file UI features., _(*1)

See it. In 49 Seconds of Superfluous Flair.

, _(*2)

Demo

Try it out., _(*3)

(User: kickassets / Pass: kickassets), _(*4)

Installation

composer require unclecheese/silverstripe-kickassets, _(*5)

Dependencies

• unclecheese/dropzone

Screenshots

, _(*6)

, _(*7)

, _(*8)

, _(*9)

, _(*10)

, _(*11)

, _(*12)

, _(*13)

JavaScript API

An API is exposed to the entire CMS that allows you to prompt the user to select a file in the KickAssets UI. The following, _(*14)

$('.select-files').entwine({
    onclick: function(e) {  
        e.preventDefault();
        var $t = this;
        KickAssets.requestFile(function(file) {
            $t.next('ul').append('<li><img src="'+file.iconURL+'"> '+file.filename+'</li>');
        });
    }
});

Also available is KickAssets.requestFiles, which returns an array of file objects., _(*15)

Optionally, you can pass list of permissions as a first parameter to requestFile or requestFiles., _(*16)

$('.select-files').entwine({
    onclick: function(e) {  
        e.preventDefault();
        var $t = this;
        var permissions = {
            folderID: 123, 
            canUpload: false        
        };
        KickAssets.requestFile(permissions, function(file) {
            $t.next('ul').append('<li><img src="'+file.iconURL+'"> '+file.filename+'</li>');
        });
    }
});

A full list of permissions:, _(*17)

Usage with UploadField and Dropzone

By default, the unclecheese/silverstripe-dropzone module will detect KickAssets and use it on FileAttachmentField for selecting existing files., _(*18)

To get the same behaviour on UploadField, ensure the use_on_uploadfield setting is set to true. (It is by default)., _(*19)

KickAssets:
  use_on_uploadfield: true

Most settings, such as max files, allowed extensions, and and upload folder will transfer over to the KickAssets window., _(*20)

Usage with HTMLEditorField

In addition to the "Insert Media" button that comes with the default configuration of the CMS, KickAssets adds a "Browse files..." buttton that opens the KickAssets window, allowing you to upload, move, edit, and delete files and insert them into the editor at the position of the cursor., _(*21)

If you select one or many images, they will be appended to the the editor in the order in which they were selected. If you select a file, it will link any text that is selected in the editor to the URL of that file. If no text is selected and you choose a file, it will insert a link to the file using the title of the file as the clickable text., _(*22)

Browser support

Everyone can come to the party except IE9. Sorry., _(*23)

(I'm not really sorry.), _(*24)

Contributing

KickAssets is written in React JS, and requires transpiling from ES6 and JSX. This is done using Webpack and Babel. You will need to install Webpack on your system., _(*25)

npm install -g webpack, _(*26)

Then, run npm install in your kickassets module directory to install all of the dependencies., _(*27)

To start writing code, run: webpack --watch, _(*28)

When finished, create a production bundle by setting an environment file and turning on minification., _(*29)

PROD=1 webpack -p., _(*30)

If you would prefer not to install webpack globally, there are these handy npm scripts:, _(*31)

• npm run build - Does a one time webpack build
• npm run build:watch - Equivalent to webpack --watch
• npm run build:prod - Equivalent to PROD=1 webpack -p

Troubleshooting

While in a developer environment and/or while PHP E_NOTICE is enabled, KickAssets will malfunction if your files aren't in sync., _(*32)

Thankfully, SilverStripe ships with a BuildTask that can resolve this. Head to dev/tasks and run the "Sync Files & Image Assets"., _(*33)

or, _(*34)

Ring Uncle Cheese., _(*35)