Item9214: Attach should support Drag and Drop

The title says it all. Well, almost. Click here for the full rationale and the prototype (since it was written against TWiki.)

Enjoy,

-- TimotheLitt - 27 Jun 2010

Cool stuff. How does this compare to plupload?

-- PaulHarvey - 28 Jun 2010

Next UploadPlugin will be based o plupload, including D&D upload, as well as support for html5, flash, grears, browserplus, siverlight and good old html4. plupload is by far the most advanced and flexible uploader library out there covering fallbacks for all browser techniques out there.

-- MichaelDaum - 28 Jun 2010

Mine was quick and functional enough to satisfy my immediate needs. I'd actually developed the mechanisms for another application, where the server does a lot more processing of the files, and detailed error/progress information was required.

I knew it wasn't complete, but thought it would be a useful proof of concept - and encouragement - for action here.

But even as a prototype, it sure is nice to be able to drag a couple of hundred files and have them appear as proper attachments on the wiki!

Sounds like UploadPlugin is on the right track.

-- TimotheLitt - 28 Jun 2010

Doesn't look like UploadPlugin has released a new version yet. So here's an update on my (interim?) solution.

I have found some issues with my prototype, which has been updated back on TWiki (note that the new version is in a .tar.gz while the original was a .zip.) It works around some gears issues, and also has been made general enough that it's easy to use in any file upload page. It will now find the containing form & submit all of the form's controls (that a submit would) automagically. This makes it a lot easier to add to any other form page (wiki or non-wiki). And you can customize the appearance more easily as there's now a .css file.

Gears isn't being developed anymore (that I can tell; google says it would rather work on HTML5.) But as an interim solution, this works for me.

By the way, plupload provides file queueing and segmentation - but it takes a fair bit of work to integrate into an existing form. (At least it did when I last looked at it.) My approach was to make dragging a file (or files) look the same to the server as if the existing form's file control had selected each file in sequence, and the user clicked "Submit". The client extracts the response to each post and displays it in a status area. So there's a lot less work on the server end - in the wiki case, just making any errors from the drop return a normal page rather than an oops exception.

Anyhow, I look forward to a more complete and elegant solution. I hope that my work provides encouragement.

Meantime, anyone who wishes is welcome to work with my prototype.

I'm hoping I'll be able to migrate one of these days - I intend to look at that when 1.1 releases...

-- TimotheLitt - 01 Oct 2010

Looking at how http://pen.io do the dragging of images and videos. HTML5 Drag and Drop Upload and File API Tutorial shows the principles with code. HTML5 only.

Possible jQuery solution: https://github.com/blueimp/jQuery-File-Upload

-- ArthurClemens - 01 Nov 2011

FYI: Gears doesn't even install in modern browers anymore. HTML5 seems like the way to go long term, but two years later it's still not here. Arthur's pointer confirms that IE won't support dropping files until IE 10.

TWiki implemented multiple uploads using the standard input file element and some clever javascript. That may be the best interim solution - it is more convenient than the current scheme, though it's not D&D. And at least we can keep up with them.

Basically they display a file element; when you complete one, they add a remove icon & materialize a new one above it using the DOM. The form submit then sees a single POST with 1-10 <input type="file" elements

Here's the key code (I don't see any reason for the limit of 10; any limit should be file size, not number. But size isn't available here.):

<div class="twistyPlugin"><div id="attachhelptoggle" class="twistyRememberSetting twistyContent twikiMakeHidden twikiMakeVisibleBlock twistyInited"><div class="twikiHelp"> <ul>
<li> <a class="twikiPopUp" target='FileAttachment' href="http://twiki.org/cgi-bin/view/TWiki05x01/FileAttachment" rel='nofollow'>FileAttachment</a> has more information about attaching files.
</li></ul> 
</div></div></div> <!--/twistyPlugin-->
<p />
<script type="text/javascript">
$(document).ready(
  function(){
    var fileMax = 10;
    $('#attachlist').after('<div id="files_list"></div>');
    $("input.upload").change(
      function(){
        doIt(this, fileMax);
      }
    );
  }
);
function doIt(obj, fm) {
  if($('input.upload').size() > fm) {
    alert('Max files is '+fm);
    obj.value='';
    return true;
  }
  var fileNo = $('input.upload').size();
  $(obj).hide();
  $(obj).parent().prepend('<input type="file" class="upload" name="filepath'+fileNo+'" value="" size="50" onchange="doIt(this, '+fm+');" />');
  var v = obj.value.replace( /.*[\/\\]/, "" );
  if(v != '') {
    $("div#files_list").append('<div>'+'<input type="image" src="http://twiki.org/p/pub/TWiki05x01/TWikiDocGraphics/remove.gif" width="12" height="12" border="0"  alt="Remove file" title="Remove file" value="" style="margin:-2px 0px 0px 0px; border:none; padding:0px; width:12px; height:12px; background-color:transparent;" /> '+v+'</div>').find("input").click(
      function(){
        $(this).parent().remove();
        $(obj).remove();
        return true;
      }
    );
  }
};
</script> 

-- TimotheLitt - 08 Oct 2012

TopicInteractionPlugin has drag and drop support.

-- ArthurClemens - 08 Oct 2012

Setting to No Action. Drag/Drop is implemented as an extension.

-- GeorgeClark - 04 Jan 2015

Commenting is disabled while not logged in