Front end validation #39

Merged
bones7242 merged 5 commits from front-end-validation into master 2017-06-23 20:00:07 +02:00
6 changed files with 42 additions and 19 deletions

View file

@ -1,7 +1,7 @@
{
"name": "spee.ch-backend",
"name": "spee.ch",
"version": "0.0.1",
"description": "a back end for spee.ch",
"description": "a single-serving site that reads and publishes images to and from the LBRY blockchain",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
@ -12,19 +12,19 @@
},
"repository": {
"type": "git",
"url": "git+https://github.com/billbitt/spee.ch-backend.git"
"url": "git+https://github.com/lbryio/spee.ch.git"
},
"keywords": [
"spee.ch",
"lbry",
"blockchain"
],
"author": "@billbitt @vxn",
"author": "@billbitt @kauffj @filipnyquist",
"license": "MIT",
"bugs": {
"url": "https://github.com/billbitt/spee.ch-backend/issues"
"url": "https://github.com/lbryio/spee.ch/issues"
},
"homepage": "https://github.com/billbitt/spee.ch-backend#readme",
"homepage": "https://github.com/lbryio/spee.ch#readme",
"dependencies": {
"axios": "^0.16.1",
"body-parser": "^1.17.1",

View file

@ -27,6 +27,7 @@ function previewAndStageFile(selectedFile){
var preview = document.getElementById('image-preview');
var dropzone = document.getElementById('drop-zone');
var previewReader = new FileReader();
var nameInput = document.getElementById('publish-name');
preview.style.display = 'block';
dropzone.style.display = 'none';
@ -36,9 +37,10 @@ function previewAndStageFile(selectedFile){
};
if (selectedFile) {
console.log(selectedFile);
previewReader.readAsDataURL(selectedFile); // reads the data and sets the img src
document.getElementById('publish-name').value = selectedFile.name.substring(0, selectedFile.name.indexOf('.')); // updates metadata inputs
if (nameInput.value === "") {
nameInput.value = selectedFile.name.substring(0, selectedFile.name.indexOf('.'));
}
stagedFiles = [selectedFile]; // stores the selected file for upload
} else {
preview.src = '';
@ -84,11 +86,21 @@ function dragend_handler(ev) {
/* configure the submit button */
document.getElementById('publish-submit').addEventListener('click', function(event){
event.preventDefault();
var name = document.getElementById('publish-name').value;
var invalidCharacters = /[^\w,-]/.exec(name);
// validate 'name'
if (invalidCharacters) {
alert(invalidCharacters + ' is not allowed. A-Z, a-z, 0-9, "_" and "-" only.');
return;
} else if (name.length < 1) {
alert("You must enter a name for your claim");
return;
}
// make sure a file was selected
if (stagedFiles) {
// make sure only 1 file was selected
if (stagedFiles.length > 1) {
alert("Only one file allowed at a time");
alert("Only one file is allowed at a time");
return;
}
// make sure the content type is acceptable
@ -103,6 +115,8 @@ document.getElementById('publish-submit').addEventListener('click', function(eve
alert("Only .png, .jpeg, .gif, and .mp4 files are currently supported");
break;
}
} else {
alert("Please select a file");
}
})

View file

@ -6,7 +6,6 @@ var fontSize = 28;
var topText = document.getElementById('top-text');
var bottomText = document.getElementById('bottom-text');
var ctx = canvas.getContext('2d');
var claimNameInput = document.getElementById("file-name-input");
// create the canvas
img.onload = function() {

View file

@ -5,7 +5,7 @@ var uploader = new SocketIOFileUpload(socket);
var stagedFiles = null;
var license = 'Creative Commons';
var nsfw = false;
var claimName;
var nameInput = document.getElementById("publish-name");
function dataURItoBlob(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
@ -31,8 +31,7 @@ function startPublish() {
//download the image
var dataUrl = canvas.toDataURL('image/jpeg'); // canvas defined in memeDraw.js
var blob = dataURItoBlob(dataUrl)
claimName = claimNameInput.value; // claimNameInput.value defined in memeDraw.js
var fileName = claimNameInput.value + ".jpg";
var fileName = nameInput.value + ".jpg"; //note: need to dynamically grab type
var file = new File([blob], fileName, {type: 'image/jpeg', lastModified: Date.now()});
console.log(file);
stageAndPublish(file);
@ -59,6 +58,16 @@ function createProgressBar(element, size){
}
function stageAndPublish(file) {
var name = nameInput.value;
var invalidCharacters = /[^\w,-]/.exec(name);
// validate 'name'
if (invalidCharacters) {
alert(invalidCharacters + ' is not allowed. A-Z, a-z, 0-9, "_" and "-" only.');
return;
} else if (name.length < 1) {
alert("You must enter a name for your claim");
return;
}
// stage files
stagedFiles = [file]; // stores the selected file for
// make sure a file was selected
@ -80,8 +89,9 @@ function stageAndPublish(file) {
alert("Only .png, .jpeg, .gif, and .mp4 files are currently supported");
break;
}
} else {
alert("Please select a file");
}
}
// update the publish status
@ -91,7 +101,7 @@ function updatePublishStatus(msg){
/* socketio-file-upload listeners */
uploader.addEventListener('start', function(event){
event.file.meta.name = claimName;
event.file.meta.name = nameInput.value;
event.file.meta.license = license;
event.file.meta.nsfw = nsfw;
event.file.meta.type = stagedFiles[0].type;

View file

@ -14,13 +14,13 @@
<textarea id="direct-link-holder" hidden="true">No URL yet</textarea>
<div id="publish-active-area">
<p>
<label for="top-text">Meme:</label><br/>
<label>Meme:</label><br/>
<input id="top-text" type="text" value="Hello" /><br/>
<input id="bottom-text" type="text" value="world!" /><br/>
</p>
<p>
<label for="meme-name">Claim Name:</label></br>
<input id="file-name-input" type="text" value="My-Claim-Name" />
<label for="publish-name">Claim Name:</label></br>
<input id="publish-name" type="text" placeholder="Your claim name" />
</p>
<p>
<button onclick="startPublish()">Save and Publish</button>

View file

@ -10,7 +10,7 @@
<div class="col-right">
<textarea id="direct-link-holder" hidden="true">No URL yet</textarea>
<div id="publish-active-area">
<input type="text" id="publish-name" value="Name" class="form-control">
<input type="text" id="publish-name" placeholder="Your claim name" class="form-control">
<p>
<label for="publish-license">License:</label>
<br/>