drag/drop is working

rowers/templates/document_form.html

@@ -48,7 +48,8 @@
     </script>
 {% endblock %}
 
-{% block content %}
+    {% block content %}
+    <div id="id_drop-files" class="grid_12 drop-files">
     <form id="file_form" enctype="multipart/form-data" action="{{ formloc }}" method="post">
 <div id="left" class="grid_6 alpha">
   <h1>Upload Workout File</h1>
@@ -90,5 +91,77 @@
 
 
 
-</form>
+    </form>
+    </div>
 {% endblock %}
+
+    {% block scripts %}
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+<script>   
+  $(document).ready(function() {
+  console.log("Loading dropper");
+  jQuery.event.props.push('dataTransfer');
+
+  
+  var frm = $("#file_form");
+  var data = new FormData(frm[0]);
+
+  $('input').each(function( i ) {
+  console.log($(this).attr('name'),$(this).val());
+  $(this).change(function() {
+  data.set($(this).attr('name'),$(this).val());
+  if ($(this).attr('id') == 'id_file') {
+  data.set("file",this.files[0]);
+  };
+  console.log($(this).attr('name'),$(this).val());
+  });
+  });
+  
+  $('select').each(function( i ) {
+  console.log($(this).attr('name'),$(this).val());
+  $(this).change(function() {
+  data.set($(this).attr('name'),$(this).val());
+  console.log($(this).attr('id'),$(this).attr('name'),$(this).val());
+  });
+  });
+  
+  frm.submit(function() {
+  console.log("Form submission");
+  console.log(data);
+  $.ajax({
+  data: data,
+  type: $(this).attr('method'),
+  url: '/rowers/workout/upload_ajax/',
+  contentType: false,
+  processData: false,
+  success: function(result) {
+  console.log('got something back');
+  console.log(result);
+  if (result.result == 1) {
+  window.location.href = result.url;
+  }
+  }
+  });
+  return false;
+  });
+
+  $('#id_drop-files').bind({
+  drop: function(e) {
+  e.preventDefault();
+  console.log("you dropped something");
+  var files = e.dataTransfer.files;
+  console.log(files[0]);
+  data.append("file",files[0]);
+  $("#id_file").replaceWith('<div id="id_file">'+files[0].name+'</div>');
+  },
+  mouseenter:function(){$("#id_drop-files").css("background-color","#E9E9E4");},
+  mouseleave:function(){$("#id_drop-files").css("background-color","#FFFFFF");},
+  dragover:function(e){
+  e.preventDefault();
+  $("#id_drop-files").css("background-color","#E9E9E4");},
+  dragleave:function(e){ e.preventDefault();},
+  });
+  })
+</script>
+    {% endblock %}