DropzoneJSSkin

Page contents

• Screenshot
• Features
• Browser support
• Installation
• How it's working
• Skin Info

The DropzoneJSSkin adds a file drag and drop capability to the attach page. It's implemented uses HTML5 features. So it determines whether the browser is compatible with the drag and drop capability. If it isn't, the capability is suppressed and the attach pgae works just like the pattern skin's attach page.

Screenshot

Features

As shown on the screensht, if the skin is in effect, on an HTML5 capable browser, on an attachment handling page, you see a "Drop files or click" area in place of a button to open a file dialog box. You can either drag and drop files (one or more) or click the area to see a file dialog box.

• File uploading starts when you click the "Upload file" button
• You can remove a file from the file list by clicing the "Remove file" button under the file's thumbnail image
• On a file dialog box opened by clicking the area, you can select more than one files, which is not possible with the ordinary attach page

Browser support

• Chrome 7+
• Firefox 4+
• IE 10+
• Opera 12+ (Version 12 for Mac OS is disabled because their API is buggy)
• Safari 6+

For all the other brwowsers, this skin shows the same attach page as PatternSkin.

Installation

Note: You do not need to install anything on the browser to use this skin. The following instructions are for the administrator who installs the skin on the server where TWiki is running.

• Download the ZIP file from this topic (see below)
• Unzip DropzoneJSSkin.zip in your twiki installation directory
• Test if installed on the supported browsers
• For skin activation see TWikiSkins

How it's working

As the name of this skin suggests, this skin is using DropzoneJS JavaScript library (MIT license).

When an attach page of this skin is loaded by the brower, DOM-wise, it's almost the same as an attach page of PatternSkin. Then, a piece of JavaScrip code is kicked through $(document).ready{function() {...});. That code checks if the browser is capable of drag and drop. If it is, the page is modified for drag and drop.

DropzoneJS is flexible enough to be configured to behave like PatternSkin's attach page. Needless to say, it should be easy to have an attachment drag and drop feature on a TWiki topic mimicking attach.dropzonejs.tmpl.

Skin Info

• Set SHORTDESCRIPTION = Skin with a file drag and drop capability on the attach page

Skin Author:	TWiki:Main.HideyoImazu
Copyright:	© 2014 TWiki:TWiki.TWikiContributor
License:	GPL (GNU General Public License)
Description:	DropzoneJS skin, adding a file drag and drop capability to the attach page using HTML5 features
Screenshot:
Preview:	Preview with this topic
Base Name:	dropzone,pattern
Skin Version:	2014-05-02

Dependencies:	TWiki 5.0 or later; TWiki:Plugins/PatternSkin; TWiki:Plugins/JQueryPlugin
Skin Home:	http://TWiki.org/cgi-bin/view/Plugins/DropzoneJSSkin
Feedback:	http://TWiki.org/cgi-bin/view/Plugins/DropzoneJSSkinDev
Appraisal:	http://TWiki.org/cgi-bin/view/Plugins/DropzoneJSSkinAppraisal