HTML5 drag and drop

Question

I'm trying to setup HTML5 drag and drop using dataTransfer.getData (http://html5demos.com/drag-anything) which reads any text into drop window and use plupload (http://www.plupload.com) to save that data.

Current code:

if (getDataType.checked == false && e.dataTransfer.types) {
    li.innerHTML = '<ul>';
    [].forEach.call(e.dataTransfer.types, function (type) {
      li.innerHTML += '<li>' + entities(e.dataTransfer.getData(type) + ' (content-type: ' + type + ')') + '</li>';
      if (e.dataTransfer.types == 'Files') {
          li.innerHTML += '<li>' + entities(e.dataTransfer.getData(type) + ' (uploadable: ' + type + ')') + '</li>';
      }
    });
    li.innerHTML += '</ul>';

  } else {
    // ... however, if we're IE, we don't have the .types property, so we'll just get the Text value
    li.innerHTML = e.dataTransfer.getData('Text');
  }

I need help taking the output of dataTransfer.getData to plupload and the dropzone knowing the difference between a file and snippet of text.

EDIT: To add more context around what I've tried. 1. Use if statement to do something if the dropped items are files. This doesn't work because (I believe) the items have already been dropped and therefore can't be uploaded 2. Get dataTransfer.files but that doesn't store uploadable files and kills the on-the-fly writing of the snippet.

I think that the solution involves querying the dropped items at the beginning and then using plupload for the files and dataTransfer.getData for the snippets - problem is I don't know how to do this. Any help would be much appreciated.

Answer 1

You could bind another event to the plupload droparea. On that event check if its a snippet, if so do what you want with the snippet. Otherwise just let plupload handle the file drag and drop.

There are plenty of examples on www.plupload.com they also have some really good forums.

Also I wrote up a blog post here http://www.foliotek.com/devblog/plupload-custom-file-upload-ui/ that shows how to bind a custom UI that utilized a drag and drop area using Plupload to manage the file upload.

Hope that helps ...