Fix drag and drop / allowSubmit

Author: Philipp Heckel

server/index.gohtml

@@ -109,8 +109,8 @@
             <div class="col"></div>
             <div class="col-auto col-last">
                 <button id="info-button" class="button">What is this?</button>
-                <button id="save-button" class="button">Save</button>
-                <button id="upload-button" class="button">Upload</button>
+                <button id="save-button" class="button" title="Save the contents of the text area and generate a link">Save</button>
+                <button id="upload-button" class="button" title="Pick a file from your computer, upload it and generate a link to access it">Upload</button>
                 <button id="logout-button" class="button hidden">Logout</button>
                 <input type="file" id="file-upload" class="hidden" onchange="handleFile(this.files[0])">
             </div>

server/static/js/app.js

@@ -130,7 +130,7 @@ function logout() {
 /* Drag & drop */
 
 function showDropZone() {
-    if (allowSubmit) {
+    if (allowSubmit()) {
         dropArea.style.visibility = "visible";
         hideInfoArea()
     }
@@ -141,7 +141,7 @@ function hideDropZone() {
 }
 
 function allowDrag(e) {
-    if (allowSubmit) {
+    if (allowSubmit()) {
         e.dataTransfer.dropEffect = 'copy';
         e.preventDefault();
     }
@@ -176,25 +176,33 @@ headerFileId.value = ''
 
 /* File ID: input validation */
 
-let allowSubmit = true
 headerFileId.addEventListener('keyup', fileIdChanged)
 headerFileId.addEventListener('paste', fileIdChanged)
 
 function fileIdChanged(e) {
-    let textValid = headerFileId.value === "" || /^[0-9a-z][-_.0-9a-z]*$/i.test(headerFileId.value)
-    if (textValid) {
-        allowSubmit = true
+    if (textValid()) {
         headerFileId.classList.remove('error')
         headerSaveButton.disabled = false
         headerUploadButton.disabled = false
     } else {
-        allowSubmit = false
         headerFileId.classList.add('error')
         headerSaveButton.disabled = true
         headerUploadButton.disabled = true
     }
 }
 
+function textValid() {
+    return headerFileId.value === "" || /^[0-9a-z][-_.0-9a-z]*$/i.test(headerFileId.value)
+}
+
+function allowSubmit() {
+    if (clientSideEnabled()) {
+        return false
+    } else {
+        return textValid()
+    }
+}
+
 /* File ID: random name checkbox */
 
 headerRandomFileId.checked = randomFileNameEnabled()
@@ -241,7 +249,7 @@ function changeClientSideEnabled(enabled) {
         headerStream.disabled = true
         headerUploadButton.disabled = true
     } else {
-        changeRandomFileIdEnabled(headerFileId.checked)
+        changeRandomFileIdEnabled(randomFileNameEnabled())
         headerRandomFileId.disabled = false
         headerTTL.disabled = false
         headerStream.disabled = false
@@ -384,7 +392,6 @@ async function saveClientSide() {
             reader.onload = () => {
                 const data = reader.result.substr(reader.result.indexOf(',') + 1)
                 const url = `${location.protocol}//${location.host}${location.pathname}#${data}`;
-                location.href = url // update #anchor
                 progressFinish(200, "", url, "", 0, false)
             };
             reader.readAsDataURL(new Blob([new Uint8Array(compressed)]));
@@ -396,7 +403,7 @@ async function saveClientSide() {
 }
 
 async function saveServerSide() {
-    if (!allowSubmit) {
+    if (!allowSubmit()) {
         return
     }
 
@@ -632,7 +639,7 @@ async function reserveAndUpdateLinkFields(file, nameHint) {
 }
 
 async function uploadFile(file) {
-    if (!allowSubmit) {
+    if (!allowSubmit()) {
         return
     }