From bed72b7e947c30c41a4d3545abd43c3dc66d9dba Mon Sep 17 00:00:00 2001 From: bill bittner Date: Tue, 3 Oct 2017 10:05:09 -0700 Subject: [PATCH] rearranged preview code --- helpers/errorHandlers.js | 11 +-- ...{black_video_play => black_video_play.jpg} | Bin public/assets/js/generalFunctions.js | 2 - public/assets/js/publishFileFunctions.js | 43 +++++++---- public/assets/js/validationFunctions.js | 15 +++- routes/sockets-routes.js | 10 +-- views/index.handlebars | 18 +++-- views/partials/publishForm-Details.handlebars | 4 +- views/partials/publishForm-Submit.handlebars | 67 +----------------- 9 files changed, 65 insertions(+), 105 deletions(-) rename public/assets/img/{black_video_play => black_video_play.jpg} (100%) diff --git a/helpers/errorHandlers.js b/helpers/errorHandlers.js index d1ac23cc..596a4601 100644 --- a/helpers/errorHandlers.js +++ b/helpers/errorHandlers.js @@ -26,14 +26,7 @@ module.exports = { res.status(400).send(error); } }, - handlePublishError (error) { - logger.error('Publish Error:', useObjectPropertiesIfNoKeys(error)); - 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; - } + useObjectPropertiesIfNoKeys (err) { + return useObjectPropertiesIfNoKeys(err); }, }; diff --git a/public/assets/img/black_video_play b/public/assets/img/black_video_play.jpg similarity index 100% rename from public/assets/img/black_video_play rename to public/assets/img/black_video_play.jpg diff --git a/public/assets/js/generalFunctions.js b/public/assets/js/generalFunctions.js index d19f35ec..5b5f5fe7 100644 --- a/public/assets/js/generalFunctions.js +++ b/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); diff --git a/public/assets/js/publishFileFunctions.js b/public/assets/js/publishFileFunctions.js index 66410aab..d9462290 100644 --- a/public/assets/js/publishFileFunctions.js +++ b/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'); - var dropzoneWrapper = document.getElementById('publish-dropzone-wrapper'); - var previewReader = new FileReader(); - var nameInput = document.getElementById('claim-name-input'); + const previewHolder = document.getElementById('asset-preview-holder'); + const dropzoneWrapper = document.getElementById('publish-dropzone-wrapper'); + const previewReader = new FileReader(); + 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 = `

loading preview...

` + } previewReader.readAsDataURL(selectedFile); previewReader.onloadend = function () { previewHolder.innerHTML = 'image preview'; }; + } else { + previewHolder.innerHTML = `` } // 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) { - var claimName = document.getElementById('claim-name-input').value; - var channelName = document.getElementById('channel-name-select').value; +function publishStagedFile(event) { + const claimName = document.getElementById('claim-name-input').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; }) diff --git a/public/assets/js/validationFunctions.js b/public/assets/js/validationFunctions.js index 7d4f2e00..18ef77be 100644 --- a/public/assets/js/validationFunctions.js +++ b/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) { diff --git a/routes/sockets-routes.js b/routes/sockets-routes.js index c7dadd54..f20b8001 100644 --- a/routes/sockets-routes.js +++ b/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 } diff --git a/views/index.handlebars b/views/index.handlebars index 13ef2fe2..5003646b 100644 --- a/views/index.handlebars +++ b/views/index.handlebars @@ -5,13 +5,15 @@
-

Drag & drop image or video here

-

OR

-
- - - -
+
+

Drag & drop image or video here

+

OR

+
+ + +
+
+
@@ -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; diff --git a/views/partials/publishForm-Details.handlebars b/views/partials/publishForm-Details.handlebars index 6b93036b..fa99f23c 100644 --- a/views/partials/publishForm-Details.handlebars +++ b/views/partials/publishForm-Details.handlebars @@ -1,6 +1,6 @@