textarea (multiline-textbox) file drop [solved]

[devnull]

I am trying to create a droppable textarea, where the contents of the dropped file are loaded into the textarea.

The following code will work in a non easyui-element, but how can I get this to work on a multiline textbox ?

Code:

  <input class="dropbox">

  $(".dropbox").on("dragenter",dropbox).on("drop",dropbox).on("dragleave",dropbox);
  
  function dropbox(e) {
    var me =$(this);
    e.stopPropagation(); e.preventDefault();    
    if (e.type == 'dragenter') me.addClass('over');
    else if (e.type == 'dragleave') me.removeClass('over');
    else if (e.type == 'drop') {
      var reader = new FileReader ();
      reader.onloadend = function (e) { 
        me.val(this.result);
      };
      reader.readAsText (e.originalEvent.dataTransfer.files[0]);
      me.removeClass('over');
    }  
  }

[devnull]

OK, I managed to solve this: http://jsfiddle.net/unh0y3ma/5/

You can drag and drop a text file onto the textarea and it will get populated with the contents.

However, is it possible to call an event from the html rather than from javascript, something like this:

Code:

<input id="myinp" class="easyui-textbox" data-options="multiline:true,onCreate:dropbox" style="width:200px; height:200px"/>

[jarry]

The better way to solve this issue is to extend a new method.

Code:

<script>
$.extend($.fn.textbox.methods, {
	dropbox: function(jq){
		return jq.each(function(){
			var target = this;
			var opts = $(target).textbox('options');
			opts.onDrop = opts.onDrop || function(){};
			var t = $(this).textbox('textbox');
			t.on('dragenter', dropbox).on('dragleave', dropbox).on('drop', dropbox);

			function dropbox(e) {
				var me =$(this);
				e.stopPropagation(); e.preventDefault();    
				if (e.type == 'dragenter') me.addClass('over');
				else if (e.type == 'dragleave') me.removeClass('over');
				else if (e.type == 'drop') {
					var reader = new FileReader ();
					reader.onloadend = function (e) { 
						me.focus();
						me.val(this.result);
						opts.onRead.call(target);
					};
					reader.readAsText (e.originalEvent.dataTransfer.files[0]);
					me.removeClass('over');
				}  
			}
  		})
	}
});
$(function(){
	$('#myinp').textbox('dropbox');
});
</script>
<input id="myinp" class="easyui-textbox" data-options="multiline:true,onRead:onRead" style="width:200px; height:200px"/>