Add form validation and improve response handling

Author: ptrumpis

README.md

@@ -11,15 +11,14 @@ Import your local cached Lenses from your Snap Camera application or upload cust
 ## ⚠️ Requirements
 - [Snap Camera Server](https://github.com/ptrumpis/snap-camera-server)
   - Cache Import requires v2.0+
-  - Custom Upload requires v3.3+
+  - Custom Upload requires v3.3.3+
 
 ## 🚀 Usage
-Visit the Web Import Tool and follow the instructions.
-- [Web Import Tool](https://ptrumpis.github.io/snap-lens-cache-import/)
+Visit the [Web Import Tool](https://ptrumpis.github.io/snap-lens-cache-import/) and follow the instructions.  
 
 Thats it!
 
-#### Offline Usage (optional)
+### Offline Usage (optional)
 If you have Node.js and npm installed you can download the latest release package and run a local copy with
 ```
 npx http-server
@@ -37,7 +36,7 @@ And your *settings.json* is located at
 ```
 
 ## 📺 How To Video Guide
-You can watch this step by step video guide on YouTube if you need help with the import process
+You can watch this step by step video guide on YouTube if you need help with the import process.
 
 [![Snap Camera Installation Guide](https://img.youtube.com/vi/alo49et3QxY/0.jpg)](https://www.youtube.com/watch?v=alo49et3QxY)
 

index.html

@@ -109,10 +109,10 @@ <h3>Upload and Import Snap Lenses</h3>
             <div class="upload-group row justify-content-sm-center mb-3">
                 <div class="col-xs-auto col-sm-6 col-md-4 col-lg-3">
                     <div class="form-group mb-1">
-                        <input type="file" class="form-control" name="file[]" accept=".lns" required>
+                        <input type="file" class="form-control" name="file[]" accept=".lns,.zip" required>
                     </div>
                     <div class="form-group mb-1">
-                        <input type="text" class="form-control" name="id[]" placeholder="Lens ID or Lens Share URL" required>
+                        <input type="text" class="form-control" name="id[]" placeholder="Lens ID, Lens UUID 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>

script.js

@@ -33,20 +33,38 @@ function importFiles(apiPath, formData) {
     xhr.open('POST', serverAddress.value + apiPath);
     xhr.responseType = 'json';
     xhr.onload = function () {
-        if (xhr.status >= 200 && xhr.status < 300) {
+        if (xhr.status >= 200 && xhr.status <= 500) {
             try {
                 const data = xhr.response;
-                console.log(data);
-                if (data && data.error) {
-                    error(`Import Error: ${data.error}`);
-                } else if (data && (data.import?.length || data.update?.length)) {
-                    if (data.import?.length) {
-                        success("Success!");
-                        success(`Imported IDs: ${data.import.join(', ')}`);
-                    }
-                    if (data.update?.length) {
-                        success("Success!");
-                        success(`Updated IDs: ${data.update.join(', ')}`);
+                if (data) {
+                    if (data.error !== false) {
+                        error(`Import Error: ${data.error}`);
+                    } else if (data.import?.length || data.update?.length) {
+                        success("Import Success!");
+                        if (data.import?.length) {
+                            success(`Imported new IDs: [ ${data.import.join(', ')} ]`);
+                        }
+                        if (data.update?.length) {
+                            success(`Updated existing IDs: [ ${data.update.join(', ')} ]`);
+                        }
+                        if (data.discard?.length) {
+                            info(`Discarded existing IDs: [ ${data.discard.join(', ')} ]`);
+                        }
+                        if (data.fail?.length) {
+                            error(`Failed IDs: [ ${data.fail.join(', ')} ]`);
+                        }
+                    } else if (data.discard?.length) {
+                        info(`No new lenses were imported because they already exist.`);
+                        info(`Discarded existing IDs: [ ${data.discard.join(', ')} ]`);
+
+                        if (data.fail?.length) {
+                            error(`Failed IDs: [ ${data.fail.join(', ')} ]`);
+                        }
+                    } else if (data.fail?.length) {
+                        error(`Importing failed without error.`);
+                        error(`Failed IDs: [ ${data.fail.join(', ')} ]`);
+                    } else {
+                        info(`The request was executed successfully, but no changes were made.`);
                     }
                 } else {
                     error(`API Error: no response`);
@@ -60,7 +78,7 @@ function importFiles(apiPath, formData) {
         }
     };
     xhr.onerror = function () {
-        error("Network Error");
+        error("Network Error: Make sure your server is reachable.");
     };
     xhr.send(formData);
 }
@@ -69,6 +87,10 @@ function error(message) {
     out(message, 'warning');
 }
 
+function info(message) {
+    out(message, 'info');
+}
+
 function success(message) {
     out(message, 'success');
 }
@@ -92,6 +114,14 @@ function parseLensId(path) {
     return null;
 }
 
+function isUuid(string) {
+    const uuid = string.match(/[a-f0-9]{32}/gi)
+    if (uuid && uuid[0]) {
+        return true;
+    }
+    return false;
+}
+
 function isValidUrl(string) {
     try {
         new URL(string);
@@ -160,7 +190,13 @@ startCacheImport.addEventListener("click", function (e) {
 
     response.innerHTML = "";
 
+    if (!cacheImportForm.has('file[]')) {
+        error(`Error: There is no file to upload.`);
+        return false;
+    }
+
     importFiles(importCacheApiPath, cacheImportForm);
+    return true;
 });
 
 addLensUpload.addEventListener("click", function (e) {
@@ -182,14 +218,16 @@ resetLensUpload.addEventListener("click", function (e) {
 
 startLensUpload.addEventListener("click", function (e) {
     e.preventDefault();
-    
+
     lensUploadForm = new FormData();
 
     response.innerHTML = "";
     let isErrorOccurred = false;
 
     const form = this.closest('form');
     if (form && !form.checkValidity()) {
+        error(`Error: You must fill in the input fields correctly.`);
+        form.reportValidity();
         return false;
     }
 
@@ -201,25 +239,33 @@ startLensUpload.addEventListener("click", function (e) {
         if (fileInput.files.length > 0) {
             lensUploadForm.append('file[]', fileInput.files[0]);
         } else {
-            error(`Error: You have to select a .lns file.`);
+            error(`Error: You have to select a .lns or .zip file.`);
             isErrorOccurred = true;
         }
 
         const inputVal = idInput.value.trim();
         const lensId = parseLensId(inputVal);
         if (lensId) {
             lensUploadForm.append('id[]', lensId);
-        } else if (isValidUrl(inputVal)) {
+        } else if (isValidUrl(inputVal) || isUuid(inputVal)) {
             lensUploadForm.append('id[]', inputVal);
         } else {
-           error(`Error: "${inputVal}" is neither a valid Lens ID nor a share URL.`);
+            error(`Error: "${inputVal}" is neither a valid Lens ID nor a share URL or UUID.`);
             isErrorOccurred = true;
         }
     });
 
-    if (!isErrorOccurred) {
-        importFiles(importLensApiPath, lensUploadForm);
+    if (isErrorOccurred) {
+        return false;
+    }
+
+    if (!lensUploadForm.has('id[]') || !lensUploadForm.has('file[]')) {
+        error(`Error: There is no file to upload.`);
+        return false;
     }
+
+    importFiles(importLensApiPath, lensUploadForm);
+    return true;
 });
 
 document.addEventListener("DOMContentLoaded", function () {