Allow ID or share URL for lens uploads

ptrumpis · Mar 9, 2024 · eefd137 · eefd137
1 parent cb21ea8
commit eefd137
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -43,8 +43,8 @@
 
     <div class="cover-container w-100 h-100 p-3 mx-auto">
         <main class="px-3">
-            <h3>Re-use your cached Snap Lenses</h3>
-            <p class="lead">This web upload form will import lenses stored in your local application cache to your own Docker based Snap Camera Server.</p>
+            <h3>Upload and Import Snap Lenses</h3>
+            <p class="lead">This web upload form will upload modified Lenses and import Lenses stored in your local application cache to your own Snap Camera Server.</p>
 
             <div class="row justify-content-sm-center">
                 <div class="col-xs-auto col-sm-6 col-md-4 col-lg-3">
@@ -60,8 +60,8 @@ <h3>Re-use your cached Snap Lenses</h3>
                     <div class="mb-4">
                         <label for="uploadMode" class="form-label">Upload Mode</label>
                         <select id="uploadMode" class="form-select">
-                            <option value="cacheImport" selected>Cache Import</option>
-                            <option value="lensUpload">Individual Lens Upload</option>
+                            <option value="cacheImport" selected>Cache Import Mode</option>
+                            <option value="lensUpload">Individual Lens Upload Mode</option>
                         </select>
                     </div>
                 </div>
@@ -89,15 +89,17 @@ <h3>Re-use your cached Snap Lenses</h3>
             </div>
 
             <div id="lensUpload" class="mb-4 collapse">
-                <div id="lensUploadGroups"></div>
+                <form action="#">
+                    <div id="lensUploadGroups"></div>
 
-                <p class="lead">
-                    <a href="#" id="addLensUpload" class="btn btn-sm btn-primary fw-bold">Add Another Lens</a>
-                </p>
-                <p class="lead">
-                    <a href="#" id="resetLensUpload" class="btn btn-md btn-secondary fw-bold">Reset Form</a>
-                    <a href="#" id="startLensUpload" class="btn btn-md btn-light fw-bold">Start Upload</a>
-                </p>
+                    <p class="lead">
+                        <a href="#" id="addLensUpload" class="btn btn-sm btn-primary fw-bold">Add Another Lens</a>
+                    </p>
+                    <p class="lead">
+                        <button type="reset" id="resetLensUpload" class="btn btn-md btn-secondary fw-bold">Reset Form</button>
+                        <button type="submit" id="startLensUpload" class="btn btn-md btn-light fw-bold">Start Upload</button>
+                    </p>
+                </form>
             </div>
 
             <p id="responseSuccess" class="text-success"></p>
@@ -111,7 +113,7 @@ <h3>Re-use your cached Snap Lenses</h3>
                         <input type="file" class="form-control" name="lens[]" accept=".lns" required>
                     </div>
                     <div class="form-group mb-1">
-                        <input type="text" class="form-control" name="id[]" placeholder="Lens ID" required>
+                        <input type="text" class="form-control" name="id[]" placeholder="Lens ID or Lens Share URL" required>
                     </div>
                     <div class="form-group mb-1">
                         <button class="btn btn-sm btn-danger" type="button" onclick="this.closest('.upload-group').remove()">Remove</button>

diff --git a/script.js b/script.js
@@ -73,6 +73,15 @@ function parseLensId(path) {
     return null;
 }
 
+function isValidUrl(string) {
+    try {
+        new URL(string);
+        return true;
+    } catch (_) {
+        return false;
+    }
+}
+
 function addNewLensUploadGroup() {
     const clone = document.importNode(lensUploadGroup.content, true);
     lensUploadGroups.appendChild(clone);
@@ -125,6 +134,11 @@ resetCacheImport.addEventListener("click", function (e) {
 });
 
 startCacheImport.addEventListener("click", function (e) {
+    e.preventDefault();
+
+    responseSuccess.innerHTML = "";
+    responseError.innerHTML = "";
+
     importFiles(importCacheApiPath, cacheImportForm);
 });
 
@@ -143,21 +157,44 @@ resetLensUpload.addEventListener("click", function (e) {
 });
 
 startLensUpload.addEventListener("click", function (e) {
+    responseSuccess.innerHTML = "";
+    responseError.innerHTML = "";
+    let isErrorOccurred = false;
+
+    if (this.closest('form').checkValidity()) {
+        e.preventDefault();
+    } else {
+        return false;
+    }
+
     const uploadGroups = document.querySelectorAll('.upload-group');
     uploadGroups.forEach(group => {
         const fileInput = group.querySelector('input[type="file"]');
         const idInput = group.querySelector('input[name="id[]"]');
 
         if (fileInput.files.length > 0) {
             lensUploadForm.append('file[]', fileInput.files[0]);
+        } else {
+            responseError.innerHTML += `Error: You have to select a .lns file.<br/>`;
+            isErrorOccurred = true;
         }
 
-        if (idInput.value.trim() !== "") {
-            lensUploadForm.append('id[]', idInput.value.trim());
+        const inputVal = idInput.value.trim();
+        const lensId = parseLensId(inputVal);
+        if (lensId) {
+            lensUploadForm.append('id[]', lensId);
+        } else if (isValidUrl(inputVal)) {
+            lensUploadForm.append('url[]', inputVal);
+        } else {
+            responseError.innerHTML += `Error: "${inputVal}" is neither a valid Lens ID nor a share URL.<br/>`;
+            isErrorOccurred = true;
         }
     });
 
-    importFiles(importLensApiPath, lensUploadForm);
+    if (!isErrorOccurred) {
+        importFiles(importLensApiPath, lensUploadForm);
+    }
+
 });
 
 document.addEventListener("DOMContentLoaded", function () {