added drag over affect

public/assets/css/general.css

@@ -405,13 +405,20 @@ table {
 .dropzone {
 	border: 2px dashed lightgrey;
 	text-align: center;
+	background-color: white;
 }
 
 .dropzone:hover {
 	border: 2px dashed #1e90ff;
+	background-color: lightgrey;
 	cursor: pointer;
 }
 
+.dropzone--drag-over {
+	background-color: lightgrey;
+	border: 2px dashed #1e90ff;
+}
+
 #primary-dropzone-wrapper, #publish-form-wrapper {
 	height: 100%;
 }

public/assets/js/dropzoneFunctions.js

@@ -38,3 +38,13 @@ function dragend_handler(event) {
         event.dataTransfer.clearData();
     }
 }
+
+function dragenter_handler(event) {
+    console.log('drag enter', event);
+    document.getElementById(event.target.id).setAttribute('class', 'dropzone dropzone--drag-over');
+}
+
+function dragexit_handler(event) {
+    console.log('drag exit', event);
+    document.getElementById(event.target.id).setAttribute('class', 'dropzone');
+}

views/index.handlebars

@@ -1,14 +1,14 @@
 <div class="row row--full-height">
+    <form>
+        <input class="input-file" type="file" id="siofu_input" name="siofu_input" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
+    </form>
     <div id="primary-dropzone-wrapper">
-        <div id="primary-dropzone" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" onclick="triggerFileChooser('siofu_input', event)">
+        <div id="primary-dropzone" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" ondragenter="dragenter_handler(event)" ondragleave="dragexit_handler(event)" onclick="triggerFileChooser('siofu_input', event)">
             <div id="primary-dropzone-instructions">
                 <div class="row">
                     <p>Drag & drop image or video here</p>
                     <p>OR</p>
-                    <form>
                     <label class="input-file-label">CHOOSE FILE</label>
-                        <input class="input-file" type="file" id="siofu_input" name="siofu_input" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
-                    </form>
                 </div>
                 <div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
             </div>
@@ -28,10 +28,7 @@
                         <div class="row">
                             <p>Drag & drop image or video here</p>
                             <p>OR</p>
-                            <form>
                             <label class="input-file-label">CHOOSE FILE</label>
-
-                            </form>
                         </div>
                     </div>