From 58e180784ba3e8b236d668e6ee9cc27dd0d25042 Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Tue, 10 Oct 2017 11:52:34 -0700
Subject: [PATCH] made whole dragzone clickable

---
 public/assets/css/general.css |  1 +
 views/index.handlebars        | 12 +++++++-----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/public/assets/css/general.css b/public/assets/css/general.css
index fa2a272c..66f31bb0 100644
--- a/public/assets/css/general.css
+++ b/public/assets/css/general.css
@@ -402,6 +402,7 @@ table {
 
 .dropzone:hover {
 	border: 2px dashed #1e90ff;
+	cursor: pointer;
 }
 
 #primary-dropzone-wrapper, #publish-form-wrapper {
diff --git a/views/index.handlebars b/views/index.handlebars
index d332f025..279347c3 100644
--- a/views/index.handlebars
+++ b/views/index.handlebars
@@ -1,14 +1,14 @@
 {{> topBar}}
 <div class="row row--full-height">
     <div id="primary-dropzone-wrapper">
-        <div id="primary-dropzone" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
+        <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-instructions">
                 <div class="row">
                     <p>Drag & drop image or video here</p>
                     <p>OR</p>
                     <form>
                         <label class="input-file-label" for="siofu_input">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"/>
+                        <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>
@@ -23,7 +23,7 @@
         <div class="column column--5 column--med-10 align-content-top" >
             <!-- preview -->
             <div class="row">
-                <div id="asset-preview-holder" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" onmouseenter="showInstructions()" onmouseleave="hideInstructions()">
+                <div id="asset-preview-holder" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" onmouseenter="showInstructions()" onmouseleave="hideInstructions()" onclick="triggerFileChooser('siofu_input', event)">
                     <div id="asset-preview-target"></div>
                     <div id="preview-dropzone-instructions" hidden="true">
                         <div class="row">
@@ -31,7 +31,7 @@
                             <p>OR</p>
                             <form>
                                 <label class="input-file-label" for="siofu_input">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>
@@ -66,7 +66,6 @@
     var stagedFiles = null;
 
     /* drop zone functions */
-
     function showInstructions () {
         document.getElementById('preview-dropzone-instructions').hidden = false;
         document.getElementById('asset-preview').style.opacity = 0.3;
@@ -99,6 +98,9 @@
             event.dataTransfer.clearData();
         }
     }
+    function triggerFileChooser(fileInputId, event) {
+        document.getElementById(fileInputId).click();
+    }
 
 	/* socketio-file-upload listeners */
     function updatePublishStatus(msg){