info343/lib/courseweb/js/dnd.js

// Adapted from http://slides.html5rocks.com/src/dnd/dnd-lib.js

function DNDFileController(elem, name, type, required, ondrop) {
   var el_ = elem;
   var name_ = name;
   var type_ = type;
   var ondrop_ = ondrop;
   
   var required_ = required;
   var droppedon_ = false;
   
   var entering_ = null;
   
   // var form_ = form;
   // var name_ = name;
   // var num_ = num;
   // var thumbnails_ = document.getElementById(thumbsId);
   
   this.isrequired = function() {
      return required_;
   }
   
   this.wasdroppedon = function() {
      return droppedon_;
   };
   
   this.dragenter = function(e) {
      if (e.element() == el_) {
         console.log("dragenter: " + e.element());
         e.stopPropagation();
         e.preventDefault();
         // if (e.dataTransfer.files.length == 1 && e.dataTransfer.files[0].type == type_) {
            // console.log("elem.className (before): " + el_.className);
            el_.classList.add('accepting');
            // console.log("elem.className (after): " + el_.className);
         // }
      } else {
         console.log("dragenter (deferring): " + e.element());
         entering_ = e.element();
      }
   };
   
   this.dragover = function(e) {
      if (e.element() == el_) {
         console.log("dragover: " + e.element());
         e.stopPropagation();
         e.preventDefault();
      } else {
         console.log("dragover (deferring): " + e.element());
      }
   };
   
   this.dragleave = function(e) {
      if (e.element() == el_ && entering_ === null) {
         console.log("dragleave: " + e.element());
         e.stopPropagation();
         e.preventDefault();
         el_.classList.remove('accepting');
      } else {
         entering_ = null;
         console.log("dragleave (deferring): " + e.element());
      }
   };
   
   this.drop = function(e) {
      e.stopPropagation();
      e.preventDefault();
      
      el_.classList.remove('accepting');
      
      var file = e.dataTransfer.files[0];
      
      if (e.dataTransfer.files.length) {
         var file = e.dataTransfer.files[0];
         
         function wc2re(str) {
            return new RegExp(str.replace('*', '.*'));
         }
         
         var errormsg = "";
         if (!wc2re(type_).test(file.type)) {
            errormsg = 'Wrong type of file! The type of your file must ';
            if (type_.indexOf('*') != -1) {
               errormsg += 'match the pattern ‘' + type_ + '’.';
            } else {
               errormsg += 'be ‘' + type_ + '’.';
            }
            errormsg += " (You gave me '" + file.type + "'.)";
         }
         if (!wc2re(name_).test(file.name)) {
            errormsg = "Filenames don’t match! The name of your file must ";
            if (type_.indexOf('*') != -1) {
               errormsg += 'match the pattern ‘' + name_ + '’.';
            } else {
               errormsg += 'be EXACTLY ‘' + name_ + '’.';
            }
            errormsg += " (You gave me '" + file.type + "'.)";
         }
         
         if (errormsg) {
            alert(errormsg);
         } else {
            // var file = e.dataTransfer.files[0];
            // DROPBOX.append('file_' + num + '_name', file.name);
            // DROPBOX.append('file_' + num + '_data', file);
            
            el_.classList.add('filled');
            
            // console.log("Going to upload file " + e.dataTransfer.files[0]);
            // console.log("dropped: " + droppedon_);
            droppedon_ = true;
            // console.log("dropped: " + droppedon_);
            DROPBOX.append('files[]', e.dataTransfer.files[0]);
            
            if (el_.hasClassName('variable')) {
               el_.update(file.name);
               if (el_.hasClassName('another')) {
                  el_.removeClassName('another');
                  var li = dropboxCreateNewFileDrop('*', '*', false);
                  el_.parentNode.insert(li);
               }
            }
            
            ondrop_();
         }
      }

      return false;
   };

   el_.addEventListener("dragenter", this.dragenter, false);
   el_.addEventListener("dragover", this.dragover, false);
   el_.addEventListener("dragleave", this.dragleave, false);
   el_.addEventListener("drop", this.drop, false);
};