Attachment drag and drop with the updated PatternSkin

PatternSkin now has an HTML5 based attachment drag and drop capability. It will be part of the upcoming TWiki 6.0.1 release. You can use the drag and drop feature simply by installing the latest version from PatternSkin if you are running TWiki 5.0 or newer. It leverages the DropzoneJS JavaScript library.

With HTML5 capable browsers (including but not limited to Chrome 7+, Firefox 4+, IE 10+, Safari 6+), on the Attach page, the "Choose file" button

is replaced with a rectangle area on which you can drag and drop files.

With non-HTML5 capable browsers, the Attach page behaves as before.

As you see above, when an image file is dropped, its thumbnail is displayed. You can remove a file from the uploaded file list by clicking the "Remove file" button.

If you click the "Drop files or click" area, a file dialog box shows up and you can choose multiple files from the box.

In contrast, the file dialog box shown by the "Choose file" button allows only one file to be selected at a time.

Comments

This is a very useful new feature, increasing the usability of TWiki. Thank you Hideyo-san!

-- Peter Thoeny - 2014-05-28

.