test

www/css/autodoc.css

 	margin-top: 60px;
 	margin-bottom: 60px;
 }
+
+.autodoc_upload_zone {
+	border: 2px dashed #999;
+	border-radius: 20px;
+	padding-top: 20px;
+	padding-bottom: 20px;
+}
+
+.autodoc_upload_zone_highlight {
+	background-color: #6C757D;
+	border-color: #333;
+}

www/index.html

     <div class="container d-none" id="autodoc_tab_upload">
       <h3>upload</h3>
       <div class="row">
-        <div class="col lead bg-secondary text-center autodoc_upload_zone">
+        <div class="col">
+
           <div class="lead">Upload Zone</div>
-          <div>
-            Drag & Drop files (png, jpeg, pdf) into this zone to attach them to a single new document
-          </div>
-          <div>
-            Files can be uploaded at once or separately. A long as the page is not refreshed or the new document button
+
+          <div class="text-center autodoc_upload_zone">
+            Drag & Drop files (png, jpeg, pdf) into this zone to attach them to a single new document<br/>
+            Files can be uploaded at once or separately. A long as the page is not refreshed or the new document
+            button
             is pushed, they will all be attached to the same document
           </div>
 
+
+        </div>
+
+        <div class="col">
+          <div class="lead">Upload Status</div>
         </div>
-      </div>
 
+      </div>
     </div>
 
     <!-- Tags -->

www/js/autodoc.js

   }
 };
 
-$(document).ready(function() {
+$(document).ready(function () {
+
   change_page();
-  $(document).scroll(function() {
+  upload_zone_init();
+
+  $(document).scroll(function () {
     page_home_scroll();
   });
-  $('#autodoc_upload_zone').change(function() {
-    console.log(this);
-  });
 });
 
-$(window).bind("hashchange", function() {
+$(window).bind("hashchange", function () {
   change_page();
 });
 
   /* change menu highlights and content visibility */
   $("#autodoc_navbar")
     .find("a")
-    .each(function(id, obj) {
+    .each(function (id, obj) {
       var curhash = $(obj)
         .attr("href")
         .substr(1);
 
   $.getJSON(
     conf.openapi +
-      "/documents?pageSize=" +
-      conf.home.width +
-      "&pageIndex=" +
-      conf.home.curpage,
+    "/documents?pageSize=" +
+    conf.home.width +
+    "&pageIndex=" +
+    conf.home.curpage,
     null,
-    function(data, textStatus, jqXHR) {
+    function (data, textStatus, jqXHR) {
       // last document was loaded, stop scrolling
       if (data.length < conf.home.width) {
         conf.home.end = 1;
       }
-      $.each(data, function(id, doc) {
+      $.each(data, function (id, doc) {
         var col = $(tmpl)
           .find(".autodoc_template_home_col")
           .clone();
           .attr(
             "src",
             conf.openapi +
-              "/documents/" +
-              doc.id +
-              "/image?maxWidth=" +
-              Math.floor(1000 / conf.home.width)
+            "/documents/" +
+            doc.id +
+            "/image?maxWidth=" +
+            Math.floor(1000 / conf.home.width)
           );
 
         $(col)
           .find(".autodoc_template_home_name")
           .html(doc.name);
 
-        $.each(doc.tags, function(id, tag) {
+        $.each(doc.tags, function (id, tag) {
           $(col)
             .find(".autodoc_template_home_tag")
             .after(
   }
 }
 
-function file_upload() {
-  console.log(this.files);
+function upload_zone_init() {
+  $('.autodoc_upload_zone').on('dragenter', upload_zone_highlight);
+  $('.autodoc_upload_zone').on('dragleave', upload_zone_normal);
+  $('.autodoc_upload_zone').on('drop',      upload_zone_drop);
+}
+
+function upload_zone_highlight(e) {
+  $(e.target).addClass('autodoc_upload_zone_highlight');
+}
+
+function upload_zone_normal(e) {
+  $(e.target).removeClass('autodoc_upload_zone_highlight');
+}
+
+function upload_zone_drop(e) {
+
+  e.dataTransfer.effectAllowed = "none";
+  e.dataTransfer.dropEffect = "none";
+
+  console.log(e);
+  return true;
 }