js2/mwEmbed/libAddMedia/dragDropFile.js

   1 /* firefox 3.6 drag-drop uploading
   2 */
   3 var TCNDDU = TCNDDU || {};
   4
   5 (function( $ ) {
   6         $.dragDropFile = function ( selector ) {
   7                 //setup drag binding and highlight
   8                 var dC = $j( selector ).get(0);
   9                 dC.addEventListener("dragenter",
  10                         function(event){
  11                                 $j(dC).css('border', 'solid red');
  12                                 event.stopPropagation();
  13                                 event.preventDefault();
  14                         }, false);
  15                 dC.addEventListener("dragleave",
  16                         function(event){
  17                                 //default textbox css (should be an easy way to do this)
  18                                 $j(dC).css('border', '');
  19                                 event.stopPropagation();
  20                                 event.preventDefault();
  21                         }, false);
  22                 dC.addEventListener("dragover",
  23                         function(event){
  24                                 event.stopPropagation();
  25                                 event.preventDefault();
  26                         }, false);
  27                 dC.addEventListener("drop",
  28                         function( event ){
  29                                 //for some reason scope does not persist for events so here we go:
  30                                 doDrop( event );
  31                                 //handle the drop loader and call event
  32
  33                         }, false);
  34         function doDrop(event){
  35                 var dt = event.dataTransfer,
  36                         files = dt.files,
  37                         imgPreviewFragment = document.createDocumentFragment(),
  38                         count = files.length,
  39                         domElements;
  40
  41                 event.stopPropagation();
  42                 event.preventDefault();
  43                 // ( error out if they dragged multiple files for now)
  44                 if( files.length > 1 ){
  45                         js_log( 'errro multiple files');
  46
  47                         return false;
  48                 }
  49                 for (var i = 0; i < count; i++) {
  50                         if(files[i].fileSize < 1048576) {
  51                                 domElements = [
  52                                         document.createElement('li'),
  53                                         document.createElement('a'),
  54                                         document.createElement('img')
  55                                 ];
  56
  57                                 domElements[2].src = files[i].getAsDataURL(); // base64 encodes local file(s)
  58                                 domElements[2].width = 300;
  59                                 domElements[2].height = 200;
  60                                 domElements[1].appendChild(domElements[2]);
  61                                 domElements[0].id = "item"+i;
  62                                 domElements[0].appendChild(domElements[1]);
  63
  64                                 imgPreviewFragment.appendChild(domElements[0]);
  65
  66                                 dropListing.appendChild(imgPreviewFragment);
  67
  68                                 TCNDDU.processXHR(files.item(i), i);
  69                         } else {
  70                                 alert("file is too big, needs to be below 1mb");
  71                         }
  72                 }
  73         }
  74
  75 })(window.$mw);