rearranged preview code

helpers/errorHandlers.js

@@ -26,14 +26,7 @@ module.exports = {
       res.status(400).send(error);
     }
   },
-  handlePublishError (error) {
+  useObjectPropertiesIfNoKeys (err) {
-    logger.error('Publish Error:', useObjectPropertiesIfNoKeys(error));
+    return useObjectPropertiesIfNoKeys(err);
-    if (error.code === 'ECONNREFUSED') {
-      return 'Connection refused.  The daemon may not be running.';
-    } else if (error.response.data.error) {
-      return error.response.data.error.message;
-    } else {
-      return error;
-    }
   },
 };

public/assets/js/generalFunctions.js

@@ -6,7 +6,6 @@ function getRequest (url) {
         xhttp.responseType = 'json';
         xhttp.onreadystatechange = () => {
             if (xhttp.readyState == 4 ) {
-                console.log(xhttp);
                 if ( xhttp.status == 200) {
                     console.log('response:', xhttp.response);
                     resolve(xhttp.response);
@@ -28,7 +27,6 @@ function postRequest (url, params) {
         xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
         xhttp.onreadystatechange = () => {
             if (xhttp.readyState == 4 ) {
-                console.log(xhttp);
                 if ( xhttp.status == 200) {
                     console.log('response:', xhttp.response);
                     resolve(xhttp.response);

public/assets/js/publishFileFunctions.js

@@ -1,26 +1,39 @@
 /* publish functions */
 
+function cancelPublish () {
+    window.location.href = '/';
+}
+
 // When a file is selected for publish, validate that file and
 // stage it so it will be ready when the publish button is clicked.
 function previewAndStageFile(selectedFile){
 	const publishForm = document.getElementById('publish-form-wrapper');
-	var previewHolder = document.getElementById('asset-preview-holder');
+    const previewHolder = document.getElementById('asset-preview-holder');
-	var dropzoneWrapper = document.getElementById('publish-dropzone-wrapper');
+    const dropzoneWrapper = document.getElementById('publish-dropzone-wrapper');
-	var previewReader = new FileReader();
+    const previewReader = new FileReader();
-	var nameInput = document.getElementById('claim-name-input');
+    const nameInput = document.getElementById('claim-name-input');
+	const fileSelectionError = document.getElementById('input-error-file-selection');
 	// validate the file's name, type, and size
 	try {
+		console.log('validating file');
 		validateFile(selectedFile);
 	} catch (error) {
-		showError('input-error-file-selection', error.message);
+		console.log('file validation failed with error:', error);
+		showError(fileSelectionError, error.message);
 		return;
 	}
 	// set the image preview, if an image was provided
-	if (selectedFile.type !== 'video/mp4') {
+    console.log('file type:', selectedFile.type)
+    if (selectedFile.type !== 'video/mp4') {
+		if (selectedFile.type === 'image/gif') {
+            previewHolder.innerHTML = `<h2>loading preview...</h2>`
+		}
 		previewReader.readAsDataURL(selectedFile);
 		previewReader.onloadend = function () {
 			previewHolder.innerHTML = '<img width="100%" src="' + previewReader.result + '" alt="image preview"/>';
 		};
+	} else {
+		previewHolder.innerHTML = `<img width="100%" src="/assets/img/black_video_play.jpg"/>`
 	}
     // hide the drop zone
     dropzoneWrapper.hidden = true;
@@ -36,9 +49,13 @@ function previewAndStageFile(selectedFile){
 }
 
 // Validate the publish submission and then trigger publishing.
-function publishSelectedImage(event) {
+function publishStagedFile(event) {
-	var claimName = document.getElementById('claim-name-input').value;
+    const claimName = document.getElementById('claim-name-input').value;
-    var channelName = document.getElementById('channel-name-select').value;
+    const channelName = document.getElementById('channel-name-select').value;
+    const fileSelectionError = document.getElementById('input-error-file-selection');
+    const claimNameError = document.getElementById('input-error-claim-name');
+    const channelSelectError = document.getElementById('input-error-channel-select');
+    const publishSubmitError = document.getElementById('input-error-publish-submit');
     // prevent default so this script can handle submission
     event.preventDefault();
 	// validate, submit, and handle response
@@ -48,14 +65,14 @@ function publishSelectedImage(event) {
 		})
 		.catch(error => {
 			if (error.name === 'FileError') {
-                showError(document.getElementById('input-error-file-selection'), error.message);
+                showError(fileSelectionError, error.message);
 			} else if (error.name === 'NameError') {
-				showError(document.getElementById('input-error-claim-name'), error.message);
+				showError(claimNameError, error.message);
             } else if (error.name === 'ChannelNameError'){
 				console.log(error);
-                showError(document.getElementById('input-error-channel-select'), error.message);
+                showError(channelSelectError, error.message);
 			} else {
-				showError(document.getElementById('input-error-publish-submit'), error.message);
+				showError(publishSubmitError, error.message);
 			}
 			return;
 		})

public/assets/js/validationFunctions.js

@@ -3,9 +3,11 @@
 // validation function which checks the proposed file's type, size, and name
 function validateFile(file) {
 	if (!file) {
+		console.log('no file found');
 		throw new Error('no file provided');
 	}
 	if (/'/.test(file.name)) {
+		console.log('file name had apostrophe in it');
 		throw new Error('apostrophes are not allowed in the file name');
 	}
 	// validate size and type
@@ -13,17 +15,25 @@ function validateFile(file) {
 		case 'image/jpeg':
 		case 'image/jpg':
 		case 'image/png':
+            if (file.size > 10000000){
+                console.log('file was too big');
+                throw new Error('Sorry, images are limited to 10 megabytes.');
+            }
+            break;
 		case 'image/gif':
 			if (file.size > 50000000){
-				throw new Error('Sorry, images are limited to 50 megabytes.');
+				console.log('file was too big');
+				throw new Error('Sorry, .gifs are limited to 50 megabytes.');
 			}
 			break;
 		case 'video/mp4':
 			if (file.size > 50000000){
+                console.log('file was too big');
 				throw new Error('Sorry, videos are limited to 50 megabytes.');
 			}
 			break;
 		default:
+            console.log('file type is not supported');
 			throw new Error(file.type + ' is not a supported file type. Only, .jpeg, .png, .gif, and .mp4 files are currently supported.')
 	}
 }
@@ -133,8 +143,9 @@ function checkChannelName(name){
 
 // validation function which checks all aspects of the publish submission
 function validateFilePublishSubmission(stagedFiles, claimName, channelName){
+	console.log(`validating name: ${claimName} channel: ${channelName} file:`, stagedFiles);
 	return new Promise(function (resolve, reject) {
-		// 1. make sure only 1 file was selected
+		// 1. make sure 1 file was staged
 		if (!stagedFiles) {
 			return reject(new FileError("Please select a file"));
 		} else if (stagedFiles.length > 1) {

routes/sockets-routes.js

@@ -1,7 +1,7 @@
 const logger = require('winston');
 const publishController = require('../controllers/publishController.js');
 const publishHelpers = require('../helpers/publishHelpers.js');
-const errorHandlers = require('../helpers/errorHandlers.js');
+const { useObjectPropertiesIfNoKeys } = require('../helpers/errorHandlers.js');
 const { postToStats } = require('../controllers/statsController.js');
 
 module.exports = (app, siofu, hostedContentPath) => {
@@ -47,17 +47,17 @@ module.exports = (app, siofu, hostedContentPath) => {
         // publish the file
         publishController.publish(publishParams, file.name, file.meta.type)
         .then(result => {
-          postToStats('PUBLISH', '/', null, null, null, 'success');
           socket.emit('publish-complete', { name: publishParams.name, result });
+          postToStats('PUBLISH', '/', null, null, null, 'success');
         })
         .catch(error => {
-          error = errorHandlers.handlePublishError(error);
-          postToStats('PUBLISH', '/', null, null, null, error);
           socket.emit('publish-failure', error);
+          logger.error('Publish Error:', useObjectPropertiesIfNoKeys(error));
+          postToStats('PUBLISH', '/', null, null, null, error);
         });
       } else {
-        logger.error(`An error occurred in uploading the client's file`);
         socket.emit('publish-failure', 'File uploaded, but with errors');
+        logger.error(`An error occurred in uploading the client's file`);
         postToStats('PUBLISH', '/', null, null, null, 'File uploaded, but with errors');
         // to-do: remove the file, if not done automatically
       }

views/index.handlebars

@@ -5,13 +5,15 @@
     <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-instructions">
-                <p>Drag & drop image or video here</p>
+                <div class="row">
-                <p>OR</p>
+                    <p>Drag & drop image or video here</p>
-                <form>
+                    <p>OR</p>
-                    <div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
+                    <form>
-                    <label class="input-file-label" for="siofu_input">CHOOSE FILE</label>
+                        <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>
+                    </form>
+                </div>
+                <div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
             </div>
         </div>
     </div>
@@ -48,6 +50,7 @@
     var socket = io();
     var uploader = new SocketIOFileUpload(socket);
     var stagedFiles = null;
+
     /* drop zone functions */
     function drop_handler(ev) {
         ev.preventDefault();
@@ -73,6 +76,7 @@
             ev.dataTransfer.clearData();
         }
     }
+
 	/* socketio-file-upload listeners */
     function updatePublishStatus(msg){
         document.getElementById('publish-status').innerHTML = msg;

views/partials/publishForm-Details.handlebars

@@ -1,6 +1,6 @@
 <div id="details-detail" hidden="true">
 
-    <div class="row row--short">
+    <div class="row">
         <div class="column column--4">
             <label for="publish-license" class="label">License:* </label>
         </div><div class="column column--6">
@@ -11,7 +11,7 @@
         </div>
     </div>
 
-    <div class="row row--short">
+    <div class="row">
         <div class="column column--4">
             <label for="publish-nsfw" class="label">NSFW*</label>
         </div><div class="column column--6">

views/partials/publishForm-Submit.handlebars

@@ -1,74 +1,11 @@
 <div class="row">
     <div class="input-error" id="input-error-publish-submit" hidden="true"></div>
-    <button id="publish-submit" class="button--primary button--large" onclick="publishSelectedImage(event)">Upload</button>
+    <button id="publish-submit" class="button--primary button--large" onclick="publishStagedFile(event)">Upload</button>
 </div>
 <div class="row row--short align-content-center">
-    <button class="button--cancel" onclick="resetPublishArea()">Cancel</button>
+    <button class="button--cancel" onclick="cancelPublish()">Cancel</button>
 </div>
 
 <script type="text/javascript" >
-    function resetPublishArea () {
-        window.location.href = '/';
-    }
-    /* publish functions */
-    // When a file is selected for publish, validate that file and
-    // stage it so it will be ready when the publish button is clicked.
-    function previewAndStageFile(selectedFile){
-        const publishForm = document.getElementById('publish-form-wrapper');
-        var previewHolder = document.getElementById('asset-preview-holder');
-        var dropzone = document.getElementById('publish-drop-zone-wrapper');
-        var previewReader = new FileReader();
-        var nameInput = document.getElementById('claim-name-input');
-        // validate the file's name, type, and size
-        try {
-            validateFile(selectedFile);
-        } catch (error) {
-            showError('input-error-file-selection', error.message);
-            return;
-        }
-        // set the image preview, if an image was provided
-        if (selectedFile.type !== 'video/mp4') {
-            previewReader.readAsDataURL(selectedFile);
-            previewReader.onloadend = function () {
-                previewHolder.innerHTML = '<img width="100%" src="' + previewReader.result + '" alt="image preview"/>';
-            };
-        }
-        // hide the drop zone
-        dropzone.hidden = true;
-        publishForm.hidden = false;
-        // set the name input value to the image name if none is set yet
-        if (nameInput.value === "") {
-            var filename = selectedFile.name.substring(0, selectedFile.name.indexOf('.'))
-            nameInput.value = cleanseClaimName(filename);
-            checkClaimName(nameInput.value);
-        }
-        // store the selected file for upload
-        stagedFiles = [selectedFile];
-    }
 
-    // Validate the publish submission and then trigger publishing.
-    function publishSelectedImage(event) {
-        var claimName = document.getElementById('claim-name-input').value;
-        var channelName = document.getElementById('channel-name-select').value;
-        // prevent default so this script can handle submission
-        event.preventDefault();
-        // validate, submit, and handle response
-        validateFilePublishSubmission(stagedFiles, claimName, channelName)
-                .then(() => {
-                    uploader.submitFiles(stagedFiles);
-                })
-                .catch(error => {
-                    if (error.name === 'FileError') {
-                        showError(document.getElementById('input-error-file-selection'), error.message);
-                    } else if (error.name === 'NameError') {
-                        showError(document.getElementById('input-error-claim-name'), error.message);
-                    } else if (error.name === 'ChannelNameError'){
-                        console.log(error);
-                        showError(document.getElementById('input-error-channel-select'), error.message);
-                    } else {
-                        showError(document.getElementById('input-error-publish-submit'), error.message);
-                    }
-                    return;
-                })
-    };
 </script>