public/assets/js/dropzoneFunctions.js

@@ -1,6 +1,3 @@
-function triggerFileChooser(fileInputId, event) {
-    document.getElementById(fileInputId).click();
-}
 
 function drop_handler(event) {
     event.preventDefault();

public/assets/js/publishFileFunctions.js

@@ -1,132 +1,248 @@
 /* publish functions */
 
+let stagedFiles = null;
+
+const previewReader = new FileReader();
+
+function triggerFileChooser(fileInputId) {
+    document.getElementById(fileInputId).click();
+}
+
+function setImagePreview (selectedFile) {
+    const assetPreview = document.getElementById('asset-preview-target');
+    const thumbnailInput = document.getElementById('claim-thumbnail-input');
+    const thumbnailInputTool = document.getElementById('publish-thumbnail');
+    if (selectedFile.type !== 'video/mp4') {
+        if (selectedFile.type === 'image/gif') {
+            assetPreview.innerHTML = `<p>loading preview...</p>`
+        }
+        previewReader.readAsDataURL(selectedFile);
+        previewReader.onloadend = function () {
+            assetPreview.innerHTML = '<img id="asset-preview" src="' + previewReader.result + '" alt="image preview"/>';
+        };
+        // clear & hide the thumbnail selection input
+        thumbnailInput.value = '';
+        thumbnailInputTool.hidden = true;
+    } else {
+        assetPreview.innerHTML = `<img id="asset-preview" src="/assets/img/video_thumb_default.png"/>`;
+        // clear & show the thumbnail selection input
+        thumbnailInput.value = '';
+        thumbnailInputTool.hidden = false;
+    }
+}
+
+function hidePrimaryDropzone () {
+    const primaryDropzone = document.getElementById('primary-dropzone');
+    const publishForm = document.getElementById('publish-form');
+    primaryDropzone.setAttribute('class', 'hidden');
+    publishForm.setAttribute('class', 'row')
+}
+
+function updateClaimNameInputWithFileName (selectedFile) {
+    const nameInput = document.getElementById('claim-name-input');
+    if (nameInput.value === "") {
+        var filename = selectedFile.name.substring(0, selectedFile.name.indexOf('.'))
+        nameInput.value = cleanseClaimName(filename);
+        checkClaimName(nameInput.value);
+    }
+}
+
+function previewAndStageFile(selectedFile){
+    const fileSelectionInputError = document.getElementById('input-error-file-selection');
+    // When a file is selected for publish, validate that file and
+    // stage it so it will be ready when the publish button is clicked
+	try {
+		validateFile(selectedFile); // validate the file's name, type, and size
+	} catch (error) {
+		showError(fileSelectionInputError, error.message);
+		return;
+	}
+    // set image preview, if an image was provided
+	setImagePreview(selectedFile);
+    // hide the primary drop zone
+    hidePrimaryDropzone();
+    // set the name input value to the image name if none is set yet
+    updateClaimNameInputWithFileName(selectedFile);
+    // store the selected file for upload
+	stagedFiles = [selectedFile];
+}
+
 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');
-    const assetPreview = document.getElementById('asset-preview-target');
-    const primaryDropzone = document.getElementById('primary-dropzone');
-    const previewReader = new FileReader();
-    const nameInput = document.getElementById('claim-name-input');
-	const fileSelectionInputError = document.getElementById('input-error-file-selection');
-	const thumbnailSelectionTool = document.getElementById('publish-thumbnail');
-    const thumbnailSelectionInput = document.getElementById('claim-thumbnail-input');
-	// validate the file's name, type, and size
-	try {
-		validateFile(selectedFile);
-	} catch (error) {
-		showError(fileSelectionInputError, error.message);
-		return;
-	}
-	// set the image preview, if an image was provided
-    if (selectedFile.type !== 'video/mp4') {
-		if (selectedFile.type === 'image/gif') {
-            assetPreview.innerHTML = `<p>loading preview...</p>`
-		}
-		previewReader.readAsDataURL(selectedFile);
-		previewReader.onloadend = function () {
-            assetPreview.innerHTML = '<img id="asset-preview" src="' + previewReader.result + '" alt="image preview"/>';
-		};
-		// clear & hide the thumbnail selection input
-        thumbnailSelectionInput.value = '';
-		thumbnailSelectionTool.hidden = true;
-	} else {
-        assetPreview.innerHTML = `<img id="asset-preview" src="/assets/img/video_thumb_default.png"/>`;
-        // clear & show the thumbnail selection input
-        thumbnailSelectionInput.value = '';
-        thumbnailSelectionTool.hidden = false;
-	}
-    // hide the drop zone
-    primaryDropzone.setAttribute('class', 'hidden');
-    publishForm.setAttribute('class', 'row')
-	// 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];
+var publishFileFunctions = {
+    returnNullOrChannel: function () {
+        const channelInput = document.getElementById('channel-name-select');
+        const radios = document.getElementsByName('anonymous-or-channel');
+        let anonymousOrInChannel;
+        // replace channelName with 'anonymous' if appropriate
+        for (let i = 0; i < radios.length; i++) {
+            if (radios[i].checked) {
+                anonymousOrInChannel = radios[i].value; // do whatever you want with the checked radio
+                break; // only one radio can be logically checked, don't check the rest
+            }
+        }
+        if (anonymousOrInChannel === 'anonymous') {
+            return null;
+        };
+        return channelInput.value.trim();
+    },
+    createMetadata: function() {
+        const nameInput = document.getElementById('claim-name-input');
+        const titleInput = document.getElementById('publish-title');
+        const descriptionInput = document.getElementById('publish-description');
+        const licenseInput = document.getElementById('publish-license');
+        const nsfwInput = document.getElementById('publish-nsfw');
+        const thumbnailInput = document.getElementById('claim-thumbnail-input');
+
+        return {
+            name: nameInput.value.trim(),
+            channel: this.returnNullOrChannel(),
+            title: titleInput.value.trim(),
+            description: descriptionInput.value.trim(),
+            license: licenseInput.value.trim(),
+            nsfw: nsfwInput.checked,
+            type: stagedFiles[0].type,
+            thumbnail: thumbnailInput.value.trim()
+        }
+    },
+    appendDataToFormData: function (file, metadata) {
+        console.log(metadata);
+        var fd = new FormData();
+        fd.append('file', file)
+        for (var key in metadata) {
+            if (metadata.hasOwnProperty(key)) {
+                console.log(key, metadata[key]);
+                fd.append(key, metadata[key]);
+            }
+        }
+        return fd;
+    },
+    publishFile: function (file, metadata) {
+        var uri = "/api/publish";
+        var xhr = new XMLHttpRequest();
+        var fd = this.appendDataToFormData(file, metadata);
+        console.log('fd2:', fd);
+        xhr.upload.addEventListener("loadstart", function(e) {
+            uploadStarted();
+        })
+        xhr.upload.addEventListener("progress", function(e) {
+            if (e.lengthComputable) {
+                var percentage = Math.round((e.loaded * 100) / e.total);
+                console.log('progress:', percentage);
+                uploadProgress(percentage);
+            }
+        }, false);
+        xhr.upload.addEventListener("load", function(e){
+            console.log('loaded 100%');
+            filePublishUpdate("Your file has been loaded, and is now being published to the blockchain.  Sit tight...")
+        }, false);
+        xhr.open("POST", uri, true);
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState == 4) {
+                if (xhr.status == 200) {
+                    alert(xhr.responseText); // handle response.
+                    filePublishComplete(xhr.responseText);
+                } else {
+                    filePublishFailure(xhr.responseText);
+                }
+            } else {
+                console.log('xhr.readyState', xhr.readyState, 'xhr.status', xhr.status);
+            }
+        };
+        // Initiate a multipart/form-data upload
+        xhr.send(fd);
+    },
+    // Validate the publish submission and then trigger upload
+    publishStagedFile: function (event) {
+        event.preventDefault();  // prevent default so this script can handle submission
+        const metadata = this.createMetadata();
+        const that = this; // note: necessary ?
+        const fileSelectionInputError = 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');
+        // validate, submit, and handle response
+        validateFilePublishSubmission(stagedFiles, metadata)
+            .then( function() {
+                that.publishFile(stagedFiles[0], metadata);
+            })
+            .catch(error => {
+                if (error.name === 'FileError') {
+                    showError(fileSelectionInputError, error.message);
+                } else if (error.name === 'NameError') {
+                    showError(claimNameError, error.message);
+                } else if (error.name === 'ChannelNameError'){
+                    console.log(error);
+                    showError(channelSelectError, error.message);
+                } else {
+                    showError(publishSubmitError, error.message);
+                }
+                return;
+            })
+    },
 }
 
-// Validate the publish submission and then trigger upload
-function publishStagedFile(event) {
-    // prevent default so this script can handle submission
-    event.preventDefault();
-    // declare variables
-    const claimName = document.getElementById('claim-name-input').value;
-    let channelName = document.getElementById('channel-name-select').value;
-    const fileSelectionInputError = 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');
-    let anonymousOrInChannel;
-    // replace channelName with 'anonymous' if appropriate
-    const radios = document.getElementsByName('anonymous-or-channel');
-    for (let i = 0; i < radios.length; i++) {
-        if (radios[i].checked) {
-            // do whatever you want with the checked radio
-            anonymousOrInChannel = radios[i].value;
-            // only one radio can be logically checked, don't check the rest
-            break;
-        }
-    }
-    if (anonymousOrInChannel === 'anonymous') {
-    	channelName = null;
-    };
-	// validate, submit, and handle response
-	validateFilePublishSubmission(stagedFiles, claimName, channelName)
-		.then(() => {
-			publishFile(stagedFiles[0], claimName);
-		})
-		.catch(error => {
-			if (error.name === 'FileError') {
-                showError(fileSelectionInputError, error.message);
-			} else if (error.name === 'NameError') {
-				showError(claimNameError, error.message);
-            } else if (error.name === 'ChannelNameError'){
-				console.log(error);
-                showError(channelSelectError, error.message);
-			} else {
-				showError(publishSubmitError, error.message);
-			}
-			return;
-		})
+function uploadStarted (){
+    console.log('starting upload');
+    // hide the publish tool
+    hidePublishTools();
+    // show the progress status and animation
+    showPublishStatus();
+    showPublishProgressBar();
+};
+function uploadProgress (percentage){
+    updatePublishStatus('<p>File is loading to server</p>')
+    updateUploadPercent(`<p class="blue">${percentage}%</p>`)
+};
+function filePublishUpdate (msg) {
+    updatePublishStatus(`<p>${msg}</p>`);
+    updateUploadPercent(`<p>Curious what magic is happening here? <a class="link--primary" target="blank" href="https://lbry.io/faq/what-is-lbry">Learn more.</a></p>`);
+};
+function filePublishFailure (msg){
+    updatePublishStatus('<p> --(✖╭╮✖)→ </p><p>' + JSON.stringify(msg) + '</p><strong>For help, post the above error text in the #speech channel on the <a class="link--primary" href="https://discord.gg/YjYbwhS" target="_blank">lbry discord</a></strong>');
+    hidePublishProgressBar();
+    hideUploadPercent();
+};
+function filePublishComplete (msg) {
+    console.log('filePublishComplete message:', msg);
+    const showUrl = msg.result.claim_id + "/" + msg.name;
+    // update status
+    updatePublishStatus('<p>Your publish is complete! You are being redirected to it now.</p>');
+    updateUploadPercent('<p><a class="link--primary" target="_blank" href="\' + showUrl + \'">If you do not get redirected, click here.</a></p>')
+    // redirect the user
+    window.location.href = showUrl;
 };
 
-var publishFile = function (file, name) {
-    var uri = "/api/publish";
-    var xhr = new XMLHttpRequest();
-    var fd = new FormData();
-
-	console.log('publish file, file:', file);
-	console.log('publish file, name:', name);
-    fd.append('file', file);
-    fd.append('name', name);
-
-    xhr.upload.addEventListener("progress", function(e) {
-        if (e.lengthComputable) {
-            var percentage = Math.round((e.loaded * 100) / e.total);
-            console.log('progress:', percentage);
-        }
-    }, false);
-
-    xhr.upload.addEventListener("load", function(e){
-        console.log('loaded 100%');
-    }, false);
-
-    xhr.open("POST", uri, true);
-    xhr.onreadystatechange = function() {
-        if (xhr.readyState == 4 && xhr.status == 200) {
-            alert(xhr.responseText); // handle response.
-        } else {
-        	console.log('xhr.readyState', xhr.readyState, 'xhr.status', xhr.status);
-		}
-    };
-    // Initiate a multipart/form-data upload
-    xhr.send(fd);
+function hidePublishTools() {
+    const publishFormWrapper = document.getElementById('publish-form');
+    publishFormWrapper.setAttribute('class', 'hidden');
 }
+// publish status functions
+function showPublishStatus() {
+    const publishStatus = document.getElementById('publish-status');
+    publishStatus.setAttribute('class', 'row row--tall flex-container--column flex-container--center-center');
+}
+function updatePublishStatus(msg){
+    const publishUpdate = document.getElementById('publish-update');
+    publishUpdate.innerHTML = msg;
+}
+// progress bar functions
+function showPublishProgressBar(){
+    const publishProgressBar = document.getElementById('publish-progress-bar');
+    createProgressBar(publishProgressBar, 12);
+}
+function hidePublishProgressBar(){
+    const publishProgressBar = document.getElementById('publish-progress-bar');
+    publishProgressBar.hidden = true;
+}
+// upload percent functions
+function updateUploadPercent(msg){
+    const uploadPercent = document.getElementById('upload-percent');
+    uploadPercent.innerHTML = msg;
+}
+function hideUploadPercent(){
+    const uploadPercent = document.getElementById('upload-percent');
+    uploadPercent.hidden = true;
+}

public/assets/js/validationFunctions.js

@@ -38,6 +38,7 @@ function validateFile(file) {
 
 // validation function that checks to make sure the claim name is valid
 function validateClaimName (name) {
+    console.log('claim name:', name);
     // ensure a name was entered
     if (name.length < 1) {
         throw new NameError("You must enter a name for your url");
@@ -140,7 +141,9 @@ function checkChannelName(name){
 }
 
 // validation function which checks all aspects of the publish submission
-function validateFilePublishSubmission(stagedFiles, claimName, channelName){
+function validateFilePublishSubmission(stagedFiles, metadata){
+    const channelName = metadata.channelName;
+    const claimName = metadata.name;
     return new Promise(function (resolve, reject) {
         // 1. make sure 1 file was staged
         if (!stagedFiles) {

views/index.handlebars

@@ -53,95 +53,4 @@
 
 <script typ="text/javascript">
 
-    checkCookie();
-
-    let stagedFiles = null;
-
-    const publishFormWrapper = document.getElementById('publish-form');
-    const publishStatus = document.getElementById('publish-status');
-    const publishUpdate = document.getElementById('publish-update');
-    const publishProgressBar = document.getElementById('publish-progress-bar');
-    const uploadPercent = document.getElementById('upload-percent');
-
-	function uploadStarted (event){
-	    console.log('starting upload');
-        addInputValuesToFileMetaData(event)
-        // hide the publish tool
-        hidePublishTools();
-		// show the progress status and animation
-        showPublishStatus();
-        showPublishProgressBar();
-	};
-	function uploadProgress (event){
-		var percent = event.bytesLoaded / event.file.size * 100;
-        updatePublishStatus('<p>File is loading to server</p>')
-		updateUploadPercent(`<p class="blue">${percent.toFixed(2)}%</p>`)
-	};
-	function filePublishUpdate (msg) {
-		updatePublishStatus(`<p>${msg}</p>`);
-        updateUploadPercent(`<p>Curious what magic is happening here? <a class="link--primary" target="blank" href="https://lbry.io/faq/what-is-lbry">Learn more.</a></p>`);
-	};
-	function filePublishFailure (msg){
-        updatePublishStatus('<p> --(✖╭╮✖)→ </p><p>' + JSON.stringify(msg) + '</p><strong>For help, post the above error text in the #speech channel on the <a class="link--primary" href="https://discord.gg/YjYbwhS" target="_blank">lbry discord</a></strong>');
-	    hidePublishProgressBar();
-	    hideUploadPercent();
-	};
-	function filePublishComplete (msg) {
-		const showUrl = msg.result.claim_id + "/" + msg.name;
-		// update status
-		updatePublishStatus('<p>Your publish is complete! You are being redirected to it now.</p>');
-        updateUploadPercent('<p><a class="link--primary" target="_blank" href="\' + showUrl + \'">If you do not get redirected, click here.</a></p>')
-        // redirect the user
-		window.location.href = showUrl;
-	};
-
-	function hidePublishTools() {
-        publishFormWrapper.setAttribute('class', 'hidden');
-    }
-    // publish status functions
-    function showPublishStatus() {
-        publishStatus.setAttribute('class', 'row row--tall flex-container--column flex-container--center-center');
-    }
-    function updatePublishStatus(msg){
-        publishUpdate.innerHTML = msg;
-    }
-    // progress bar functions
-    function showPublishProgressBar(){
-        createProgressBar(publishProgressBar, 12);
-    }
-    function hidePublishProgressBar(){
-        publishProgressBar.hidden = true;
-    }
-    // upload percent functions
-    function updateUploadPercent(msg){
-        uploadPercent.innerHTML = msg;
-    }
-    function hideUploadPercent(){
-        uploadPercent.hidden = true;
-    }
-
-    function addInputValuesToFileMetaData(event) {
-        // get values from inputs
-        const name = document.getElementById('claim-name-input').value.trim();
-        const title = document.getElementById('publish-title').value.trim();
-        const description = document.getElementById('publish-description').value.trim();
-        const license = document.getElementById('publish-license').value.trim();
-        const nsfw = document.getElementById('publish-nsfw').checked;
-        const anonymous = document.getElementById('anonymous-select').checked;
-        const channel = document.getElementById('channel-name-select').value.trim();
-        const thumbnail = document.getElementById('claim-thumbnail-input').value.trim();
-        // set values on file meta data
-        event.file.meta.name = name;
-        event.file.meta.title = title;
-        event.file.meta.description = description;
-        event.file.meta.license = license;
-        event.file.meta.nsfw = nsfw;
-        event.file.meta.type = stagedFiles[0].type;
-        if (!anonymous) {
-            event.file.meta.channel = channel;
-        }
-        if (thumbnail && (thumbnail.trim !== '')){
-            event.file.meta.thumbnail = thumbnail;
-        }
-    }
 </script>

views/partials/publishForm-Submit.handlebars

@@ -1,6 +1,6 @@
 <div class="row row--padded row--wide">
     <div class="input-error" id="input-error-publish-submit" hidden="true"></div>
-    <button id="publish-submit" class="button--primary button--large" onclick="publishStagedFile(event)">Upload</button>
+    <button id="publish-submit" class="button--primary button--large" onclick="publishFileFunctions.publishStagedFile(event)">Upload</button>
 </div>
 <div class="row row--short align-content-center">
     <button class="button--cancel" onclick="cancelPublish()">Cancel</button>