added dropzone to asset preview

public/assets/css/general.css

@@ -174,6 +174,10 @@ input:-webkit-autofill {
 	background-color: white;
 }
 
+option {
+	font-family: monospace;
+}
+
 .select--no-arrow {
 	-moz-appearance:none;
 	-webkit-appearance: none;
@@ -183,9 +187,8 @@ input:-webkit-autofill {
 .select--arrow {
 	-moz-appearance:none;
 	-webkit-appearance: none;
-	align-items: left;
 	background: url('../img/down_triangle.png') no-repeat right;
-
+	padding-right: 1em;
 }
 
 .input-text--primary, .select--primary, .textarea--primary {
@@ -324,32 +327,41 @@ table {
 	border-bottom: 2px solid #1e90ff;
 }
 
-/* Publish Form */
+/* PUBLISH FORM */
+
+.dropzone {
+	border: 2px dashed lightgrey;
+	text-align: center;
+}
+
+.dropzone:hover {
+	border: 2px dashed #1e90ff;
+}
 
 #publish-dropzone-wrapper, #publish-form-wrapper {
 	height: 100%;
 }
 
 #publish-dropzone {
-	border: 2px dashed lightgrey;
-	height: calc(100% - 2px);
+	height: calc(100% - 4px);
 	position: relative;
 }
 
-#publish-dropzone:hover {
-	border: 2px dashed dodgerblue;
+#asset-preview-holder {
+	position: relative;
 }
 
-#publish-dropzone-instructions {
+#publish-dropzone-instructions, #preview-dropzone-instructions {
 	position: absolute;
 	top: 40%;
 	left: 50%;
 	transform: translateX(-50%) translateY(-40%);
 }
 
-.asset-preview {
+#asset-preview {
 	display: block;
-	width: 100%;
+	padding: 0.5rem;
+	width: calc(100% - 1rem);
 }
 
 /* Show page */
@@ -359,10 +371,6 @@ table {
 	width: 100%;
 }
 
-.copy-input {
-
-}
-
 /* item lists */
 
 .content-list-item {

public/assets/js/publishFileFunctions.js

@@ -8,7 +8,7 @@ function cancelPublish () {
 // stage it so it will be ready when the publish button is clicked.
 function previewAndStageFile(selectedFile){
 	const publishForm = document.getElementById('publish-form-wrapper');
-    const previewHolder = document.getElementById('asset-preview-holder');
+    const assetPreview = document.getElementById('asset-preview-target');
     const dropzoneWrapper = document.getElementById('publish-dropzone-wrapper');
     const previewReader = new FileReader();
     const nameInput = document.getElementById('claim-name-input');
@@ -26,14 +26,14 @@ function previewAndStageFile(selectedFile){
     console.log('file type:', selectedFile.type)
     if (selectedFile.type !== 'video/mp4') {
 		if (selectedFile.type === 'image/gif') {
-            previewHolder.innerHTML = `<h2>loading preview...</h2>`
+            assetPreview.innerHTML = `<h2>loading preview...</h2>`
 		}
 		previewReader.readAsDataURL(selectedFile);
 		previewReader.onloadend = function () {
-			previewHolder.innerHTML = '<img width="100%" src="' + previewReader.result + '" alt="image preview"/>';
+            assetPreview.innerHTML = '<img id="asset-preview" src="' + previewReader.result + '" alt="image preview"/>';
 		};
 	} else {
-		previewHolder.innerHTML = `<img width="100%" src="/assets/img/black_video_play.jpg"/>`
+        assetPreview.innerHTML = `<img id="asset-preview" src="/assets/img/black_video_play.jpg"/>`
 	}
     // hide the drop zone
     dropzoneWrapper.hidden = true;

views/index.handlebars

@@ -3,7 +3,7 @@
 {{> topBar}}
 <div class="row row--full-height">
     <div id="publish-dropzone-wrapper">
-        <div id="publish-dropzone" class="align-content-center" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
+        <div id="publish-dropzone" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
             <div id="publish-dropzone-instructions">
                 <div class="row">
                     <p>Drag & drop image or video here</p>
@@ -25,10 +25,24 @@
         <div class="column column--5 align-content-top" >
             <!-- preview -->
             <div class="row">
-                <div id="asset-preview-holder" class="asset-show"></div>
+                <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-target"></div>
+                    <div id="preview-dropzone-instructions" hidden="true">
+                        <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"/>
+                            </form>
+                        </div>
+                        <div class="info-message info-message--failure" id="" hidden="true"></div>
+                    </div>
+
+                </div>
             </div>
             <!-- description input -->
-            <textarea rows="3" id="publish-description" class="textarea textarea--large textarea--full-width" placeholder="Description (optional)"></textarea>
+            <textarea rows="2" id="publish-description" class="textarea textarea--large textarea--full-width" placeholder="Description (optional)"></textarea>
         </div><div class="column column--5 align-content-top">
         <div id="publish-status" class="row" hidden="true"></div>
         <div id="publish-progress-bar" class="row" hidden="true"></div>
@@ -47,15 +61,27 @@
 <script src="/assets/js/validationFunctions.js"></script>
 <script src="/assets/js/publishFileFunctions.js"></script>
 <script typ="text/javascript">
+
     var socket = io();
     var uploader = new SocketIOFileUpload(socket);
     var stagedFiles = null;
 
     /* drop zone functions */
-    function drop_handler(ev) {
-        ev.preventDefault();
+
+    function showInstructions () {
+        console.log('showing instructions');
+        document.getElementById('preview-dropzone-instructions').hidden = false;
+        document.getElementById('asset-preview').style.opacity = 0.3;
+    }
+    function hideInstructions () {
+        console.log('hiding instructions');
+        document.getElementById('preview-dropzone-instructions').hidden = true;
+        document.getElementById('asset-preview').style.opacity = 1;
+    }
+    function drop_handler(event) {
+        event.preventDefault();
         // if dropped items aren't files, reject them
-        var dt = ev.dataTransfer;
+        var dt = event.dataTransfer;
         if (dt.items) {
             if (dt.items[0].kind == 'file') {
                 var droppedFile = dt.items[0].getAsFile();
@@ -63,17 +89,17 @@
             }
         }
     }
-    function dragover_handler(ev) {
-        ev.preventDefault();
+    function dragover_handler(event) {
+        event.preventDefault();
     }
-    function dragend_handler(ev) {
-        var dt = ev.dataTransfer;
+    function dragend_handler(event) {
+        var dt = event.dataTransfer;
         if (dt.items) {
             for (var i = 0; i < dt.items.length; i++) {
                 dt.items.remove(i);
             }
         } else {
-            ev.dataTransfer.clearData();
+            event.dataTransfer.clearData();
         }
     }
 

views/partials/publishForm-Channel.handlebars

@@ -4,16 +4,12 @@
     </div><div class="column column--7">
         <div id="input-error-channel-select" class="info-message info-message--failure"></div>
         <select type="text" id="channel-name-select" class="select select--primary select--arrow" value="channel" onchange="toggleChannel(event)">
-        <optgroup>
-            {{#if user}}
-                <option value="{{user.channelName}}" >@{{user.userName}}</option>
-            {{/if}}
+        {{#if user}}
+            <option value="{{user.channelName}}" >@{{user.userName}}</option>
+        {{/if}}
             <option value="none" >None</option>
-        </optgroup>
-        <optgroup>
             <option value="login">Login</option>
             <option value="new" >New</option>
-        </optgroup>
         </select>
     </div>
 </div>