Add a continious upload V0

photologue/static/upload.js

@@ -5,20 +5,21 @@
 // When user drags files, register them in the file field
 const dropZone = document.getElementById('drop_zone');
 const uploadInput = document.getElementById('id_file_field');
+const form = document.getElementById('upload_form')
 
-dropZone.ondrop = function(e) {
+dropZone.ondrop = function (e) {
     e.preventDefault();
     this.className = 'upload-drop-zone';
     console.log(e.dataTransfer.files)
     uploadInput.files = e.dataTransfer.files;
 }
 
-dropZone.ondragover = function() {
+dropZone.ondragover = function () {
     this.className = 'upload-drop-zone drop';
     return false;
 }
 
-dropZone.ondragleave = function() {
+dropZone.ondragleave = function () {
     this.className = 'upload-drop-zone';
     return false;
 }
@@ -39,4 +40,93 @@ gallerySelectUpdate();
 document.getElementById('upload_form').addEventListener('submit', (e) => {
     document.getElementById('submit-id-submit').disabled = true;
     document.getElementById('submit-id-submit').value = "Please be patient";
-})
+});
+
+
+submitbtn = document.getElementById('submit-id-submit');
+submitbtn.type = "button";
+
+async function uplaodfnc() {
+
+    console.log(uploadInput.files);
+    files = uploadInput.files;
+    submitbtn.disabled = true;
+    actual = 0;
+    submitbtn.value = "Please be patient 0% (" + actual + "/" + files.length + ")";
+
+    csrfvalue = document.getElementsByName("csrfmiddlewaretoken")[0].value;
+
+    gallery_ID = gallerySelect.value;
+
+    if (gallery_ID == "") {
+        // Create gallery
+    }
+
+    total = files.length;
+
+    fdata = new FormData(uploadInput.form);
+    fdata.delete("file_field");
+    fdata.append("reptype", "json");
+    console.log(fdata);
+
+    const response = await fetch("/upload/", {
+        method: "POST",
+        body: fdata,
+    });
+    returned = await response.json();
+
+    console.log(returned);
+    console.log(returned.code);
+    if (returned.code != 200) {
+        window.alert("There is an error in the form" + returned.error);
+    }
+
+    // Upload files
+    for (let file of files) {
+        actual++;
+        sendform = new FormData();
+        sendform.append("csrfmiddlewaretoken", csrfvalue);
+        sendform.append("file_field", file);
+        sendform.append("reptype", "json");
+        sendform.append("gallery", returned.galleryID);
+
+        try {
+            const response = await fetch("/upload/", {
+                method: "POST",
+                body: sendform,
+            });
+            okpass = await response.ok;
+            console.log(file.name, okpass);
+            if ( !okpass) {
+                window.alert("Error with " + file.name + "code" + await response.code);
+            }
+            submitbtn.value = "Please be patient " + Math.round(100 * actual / total) + "% (" + actual + "/" + files.length + ")";
+
+        } catch (e) {
+            console.error(e);
+        }
+
+    }
+
+    fdata = new FormData(uploadInput.form);
+    fdata.delete("file_field");
+    fdata.append("reptype", "json");
+    fdata.append("end","end")
+    console.log(fdata);
+
+    const response = await fetch("/upload/", {
+        method: "POST",
+        body: fdata,
+    });
+    returned = await response.json();    
+
+    submitbtn.value = "Upload Complete Please reload the page";
+}
+
+submitbtn.addEventListener("click", uplaodfnc);
+
+console.log("New Upload File");
+
+
+
+