DropzoneJSSkin < TWiki

TWiki Web>DropzoneJSSkin (22 Jan 2019, TWikiAdminUser) (raw view)

---+!! !DropzoneJSSkin
<sticky>
<div style="float:right; background-color:#EBEEF0; margin:0 0 20px 20px; padding: 0 10px 0 10px;">
%TOC{title="Page contents"}%
</div>
</sticky>
%X% *Recent versions of PatternSkin (2014-05-21 or newer) has the drag and drop feature of !DrozoneJSSkin integrated. So there is not much use of this skin anymore.*
This skin still exists mainly for people who cannot touch PatternSkin but can install a new skin.
And understanding how the drag and drop feature works might be easier with this skin than PatternSkin.

The !DropzoneJSSkin adds a file drag and drop capability to an attach page of the PatternSkin.
It's implemented using HTML5 features without using Flash.
So it determines whether the web browser is compatible of 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

%ATTACHURL%/dropzonejs-skin.png

---++ Features

As shown on the screenshot, 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 when you click the area, you can select more than one files, which is not possible with the ordinary attach page
   * It observes =%<nop>ATTACHFILESIZELIMIT%= (the maximum size of an attachment file in kilobytes). If a dropped or selected file is bigger than the limit, the underlining !JavaScript code refuses to send it to the server. If it's 0, it means 1 terabytes, which is virtually unlimited since it would take about 15 min over a 10 Gbps connection to transfer that amount, which causes web browser timeout
   * You can upload up to 10 files at a time. If you drop or select more than that, the 11th file onward are not uploaded

---++ 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
   * [[%SCRIPTURL{"attach"}%/%WEB%/%TOPIC%?skin=dropzonejs,pattern][Test if installed]] on [[#Browser_support][the supported browsers]]
   * Since !DropzoneJSSkin is an extension to PatternSkin, you are supposed to enable it by setting SKIN as follows assuming you are using TopMenuSkin.<pre>
   * <nop>Set SKIN = dropzonejs,topmenu,pattern
</pre>
   For more about skin activation see %SYSTEMWEB%.TWikiSkins
<!--
"%SYSTEMWEB%." should be there since this topic is put in the Plugins web
of twiki.org as well as %SYSTEMWEB%.
-->

---++ How it's working

As the name of this skin suggests, this skin is using [[http://www.dropzonejs.com][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

%TABLE{ tablewidth="100%" columnwidths="170," }%
|  Skin Author: | TWiki:Main.HideyoImazu |
|  Copyright: | &copy; 2014 TWiki:TWiki.TWikiContributor |
|  License: | GPL ([[http://www.gnu.org/copyleft/gpl.html][GNU General Public License]]) |
|  Description: | !DropzoneJS skin, adding a file drag and drop capability to the attach page using HTML5 features |
|  Screenshot: | <a href="%ATTACHURL%/dropzonejs-skin.png"><img src="%ATTACHURL%/dropzonejs-skin.png" alt="Screenshot" title="Click for full screen image" width="356" height="145" /></a> |
|  Preview: | [[%SCRIPTURL{attach}%/%WEB%/%TOPIC%?skin=dropzonejs,pattern][Preview with this topic]] |
|  Base Name: | dropzonejs,topmenu,pattern |
|  Skin Version: | 2014-05-22 |
%TWISTY{
 mode="div"
 showlink="Show Change History %ICONURL{toggleopen}%"
 hidelink="Hide Change History %ICONURL{toggleclose}%"
}%
%TABLE{ tablewidth="100%" columnwidths="170," }%
|  2014-05-22: | TWikibug:Item7501: DropzoneJSSkin and PatternSkin with DropzoneJSSkin integrated fail to update file with the manage attachment action |
|  2014-05-21: | Documentation update concerning PatternSkin had drag and drop feature integrated |
|  2014-05-15: | Documentation update, cope with ATTACHFILESIZELIMIT = 0 |
|  2014-05-09: | Upgraded dropzone.js to version 3.9.0 |
|  2014-05-02: | Upgraded dropzone.js; Skin documentation improvement |
|  2014-05-01: | TWikibug:Item7488: Initial release |
%ENDTWISTY%
%TABLE{ tablewidth="100%" columnwidths="170," }%
|  Dependencies: | TWiki 5.0 or later; TWiki:Plugins/PatternSkin; TWiki:Plugins/JQueryPlugin |
|  Skin Home: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC% |
|  Feedback: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev |
|  Appraisal: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal |

Attachments

Topic attachments
I	Attachment	History	Action	Size	Date	Who	Comment
css	dropzone.css	r1	manage	11.2 K	23 May 2014 - 01:39	TWikiAdminUser	Saved by install script
js	dropzone.js	r1	manage	58.5 K	23 May 2014 - 01:39	TWikiAdminUser	Saved by install script
js	dropzone.min.js	r1	manage	29.3 K	23 May 2014 - 01:39	TWikiAdminUser	Saved by install script
png	dropzonejs-skin.png	r1	manage	40.1 K	23 May 2014 - 01:39	TWikiAdminUser	Saved by install script
png	spritemap.png	r1	manage	10.0 K	23 May 2014 - 01:39	TWikiAdminUser	Saved by install script
png	spritemap@2x.png	r1	manage	34.8 K	23 May 2014 - 01:39	TWikiAdminUser	Saved by install script

Topic revision: r2 - 22 Jan 2019 - TWikiAdminUser

Account
- Log In
- Register User

Edit
Attach

Copyright © 1999-2025 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.DropzoneJSSkin.