DropzoneJSSkinDev Discussion: Page for developer collaboration, enhancement requests, patches and improved versions on DropzoneJSSkin contributed by the TWikiCommunity.
• Please let us know what you think of this extension.
• For support, check the existing questions, or ask a new support question in the Support web!
• Please file bug reports in the DropzoneJSSkin bug database.

DropzoneJSSkin Feedback and Development

Initial version posted.

-- Hideyo Imazu - 2014-05-01

Thank you very much Hideyo-san for contributing this plugin! Very intuitive and easy to use.

-- Peter Thoeny - 2014-05-01

I created the supporting topics DropzoneJSSkinDev, DropzoneJSSkinAppraisal, Support.DropzoneJSSkin and TWikibug:DropzoneJSSkin. I also tagged the DropzoneJSSkin topic so that people can find it via tagging.

-- Peter Thoeny - 2014-05-02

I updated the TWiki.org TWiki with the latest version. You can test the D&D at TestDropzoneJSSkin or at any other page.

-- Peter Thoeny - 2014-05-03

I tried to install this on a TWiki-5.1.2 that has many TWiki-6.0 enhancements applied. jQuery is 1.10.2, like in TWiki-6.0. The attach screen looks OK, and I can drop files. However, the pressing "Upload" button does nothing.

I looked at the code:

$('#upload_file').replaceWith('<button type="button" class="twikiSubmit" onClick="myDropzone.processQueue();">Upload file</button>');

So the input field is replaced with a button that calls myDropzone.processQueue();. Any idea why it fails? How can I debug? I also tried to install an older skin version, no luck.

One more difference: On TWiki.org the attach screen has maxFilesize: 25000 / 1024, whereas on the TWiki-5.1.2 the attach screen has maxFilesize: 0 / 1024, - where is the maxFilesize taken from?

-- Peter Thoeny - 2014-05-12

Found the issue: This TWiki-5.1.2 has ATTACHFILESIZELIMIT = 0 set, which is defined as no limit according to TWiki docs. Once I set a reasonable high value, attach worked. I recommend to do some conditional on the ATTACHFILESIZELIMIT testing for 0 value.

-- Peter Thoeny - 2014-05-12

Doc bug: Base Name has dropzone,pattern, should be dropzonejs,pattern or better yet, dropzonejs, topmenu, pattern.

I recommend to document in the installation sections how to enable the skin.

-- Peter Thoeny - 2014-05-13

Wonderful stuff! THANK YOU!

Any chance to extend this and support clipboard operations as well, not just drag&drop? For example, as user just selected image contents in some editor, then wants to paste the image (as an attachment) into a TWiki topic?

Again, thanks for the excellent work.

-- Claus Brod - 2014-05-14

Sorry for not watching this topic. Now I am. Working on your feedback now.

-- Hideyo Imazu - 2014-05-14

Peter, the documentation (DropzoneJSSkin) has been updated. And ATTACHFILESIZELIMIT = 0 is now addressed.

-- Hideyo Imazu - 2014-05-15

Claus, it is definitely doable but would need a good amount of work to implement a WYSIWYG editor capable of pasting image. Maybe pasting images in addition to dropping files on an attach page is the next step?

-- Hideyo Imazu - 2014-05-15

Hideyo, I was thinking along the same lines: Add code to the attach page which listens to the clipboard paste event, and when something is pasted which has a MIME type of, say, image/png, read the image data from the clipboard, and generate a filename (say, clipboard1.image.png). Rest of the attachment process as usual.

I started to experiment with some JS code, but need to refresh my JS and jQuery knowhow first. Also, I am not sure yet about the best way to integrate my code into your skin code yet.

-- Claus Brod - 2014-05-15

Claus, in that case, how about looking into DrozoneJS code at http://github.com/enyo/dropzone? I suppose you want the image pasting feature to work together with DropzoneJSSkin. Then, thinking how to enhance DropzoneJS rather than implementing image pasting from scratch and then trying to integrate it with DropzoneJS would be reasonable.

-- Hideyo Imazu - 2014-05-15

Now that the DropzoneJSSkin feature are integrated into PatternSkin, simply upgrading PatternSkin to the latest gives you drag and drop. But for people who don't want to upgrade PatternSkin, DropzoneJSSkin is kept there.

-- Hideyo Imazu - 2014-05-22

On our site, I experimented with the following JavaScript code to simplify attachment uploads even further. With the following code in place, users can drag attachments over any topic page. After a delay of two seconds, the code automatically opens the attachment page where the user can then drop the image/attachment. With this, you do not have to click "Attach" anymore to upload an attachment to a TWiki topic. Works like a charm for me, tested so far on IE, Chrome and Firefox. Hope this will be useful for others as well.

<script type="text/javascript">
$(document).ready(function() {
  var dropzone = $("body");

  dropzone.on("drag", function(evt) {
    evt.preventDefault();
  });

  dropzone.on("dragenter", function(evt) {
    evt.preventDefault();
  });

  dropzone.on("dragover", function(evt) {
    var timeout = window.dragovertimeout;
    if (typeof timeout == "undefined") {
      window.dragovertimeout = "42";
      setTimeout(function () {
        window.dragovertimeout = "foo";
      }, 2000);
    }

    if (timeout == "foo") {
      window.dragovertimeout = null;
      dropzone.off("dragover");
      var newurl = location.href.replace("do/view", "do/attach");
      window.location.assign(newurl);
    }

    evt.preventDefault();
  });

  dropzone.on("dragleave", function(evt) {
    evt.preventDefault();
  });

  dropzone.on("drop", function(evt) {
    evt.preventDefault();
  });
});
</script>

-- Claus Brod - 2014-08-11

Claus, this is an extension worth considering to incorporate into the next TWiki release. Thank you so much for the idea and the code!

-- Hideyo Imazu - 2014-08-20

Thanks a lot for the kind words

I am attaching a simplified version of my code, packaged into a .tmpl file. I called the file view.dragattachments.tmpl. In my TWiki installation, I copied it to the templates folder, allowing me to activate it by adding "dragattachments" to the SKIN list. I apologize for the extremely hacky contents of the template file, as I am pretty sure they violate pretty much any rule in the template book. Works for me, though I'd love to get feedback on how to improve the template into something which might actually be usable for other TWiki users or even a future TWiki release.

-- Claus Brod - 2014-08-23

Thank you Claus! We discussed at the KampalaReleaseMeeting2014x08x21 and felt that it would be a good addition to TWiki with one change. Making the whole view page drag sensitive will prevent viewing images in the browser by d&d. It would be better to make just the "Attach" button sensitive to drag. Hideyo-san will look into this.

-- Peter Thoeny - 2014-08-23

Peter, wonderful news! Yup, for general usage, it is probably wise to make the "Attach" button a dropzone, rather than the whole page.

-- Claus Brod - 2014-08-24