Merge branch 'javascript-continous-upload' into 'master'

Add a continious upload for photographer

See merge request bde/photo21!32

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,111 @@ 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";
+
+//submitbtn.addEventListener("click", uplaodfnc);
+
+var ctnbtn = document.createElement("input");
+ctnbtn.classList = submitbtn.classList;
+ctnbtn.value="Continious Upload";
+ctnbtn.type = "button";
+
+async function uplaodfnc() {
+
+    console.log(uploadInput.files);
+    files = uploadInput.files;
+    submitbtn.disabled = true;
+    ctnbtn.disabled = true;
+    actual = 0;
+    ctnbtn.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");
+
+
+    response = await fetch("/upload/", {
+        method: "POST",
+        body: fdata,
+        headers: {
+            'Accept': 'application/json'
+        }
+    });
+    returned = await response.json();
+
+    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,
+                headers: {
+            'Accept': 'application/json'
+        }
+            });
+            okpass = await response.ok;
+            if (!okpass) {
+                window.alert("Error with " + file.name + "code" + await response.code);
+            }
+            ctnbtn.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.delete("new_gallery_title");
+    fdata.delete("new_galleru_date_start");
+    fdata.delete("new_galleru_date_end");
+    //fdata.append("reptype", "json");
+    fdata.append("gallery", returned.galleryID);
+    fdata.append("end", "end")
+
+    response = await fetch("/upload/", {
+        method: "POST",
+        body: fdata,
+        headers: {
+            'Accept': 'application/json'
+        }
+    });
+    returned = await response.json();
+
+    ctnbtn.value = "Upload Complete Please reload the page";
+}
+
+
+ctnbtn.addEventListener("click", uplaodfnc);
+
+form.appendChild(ctnbtn);
+
+
+
+
+

photologue/views.py

@@ -12,6 +12,7 @@ from django.contrib.auth.mixins import LoginRequiredMixin, PermissionRequiredMix
 from django.core.mail import mail_admins
 from django.db import IntegrityError
 from django.http import HttpResponse
+from django.http import JsonResponse
 from django.shortcuts import redirect
 from django.urls import reverse_lazy
 from django.utils.text import slugify
@@ -189,7 +190,18 @@ class GalleryUpload(PermissionRequiredMixin, FormView):
 
     def form_valid(self, form):
         # Get or create gallery
+
+        if self.request.accepts('text/html') or not self.request.accepts('application/json'):
+            response_json = False
+            finish_json = False
+        else :
+            response_json = True
+            finish_json  = form.data.get("end","") == "end"
+
         gallery = form.get_or_create_gallery()
+
+        jsondata = {"galleryID":gallery.id,"code":200}
+
         gallery_year = Path(str(gallery.date_start.year))
         gallery_dir = gallery_year / gallery.slug
 
@@ -207,6 +219,8 @@ class GalleryUpload(PermissionRequiredMixin, FormView):
                 messages.error(
                     self.request, f"{photo_file.name} was not recognized as an image"
                 )
+                jsondata["code"]=400
+                jsondata["error"] = f"{photo_file.name} was not recognized as an image"
                 continue
 
             title = f"{gallery.title} - {photo_file.name}"
@@ -228,24 +242,38 @@ class GalleryUpload(PermissionRequiredMixin, FormView):
 
             uploaded_photo_name.append(photo_file.name)
 
+
         # Notify user then managers
         n_success = len(uploaded_photo_name)
-        if already_exists:
+        if not response_json :
-            messages.success(
+            if already_exists:
-                self.request,
+                messages.success(
-                f"{n_success} photo(s) uploaded, {already_exists} photo(s) skipped as they already exist in this gallery.",
+                    self.request,
-            )
+                    f"{n_success} photo(s) uploaded, {already_exists} photo(s) skipped as they already exist in this gallery.",
-        else:
+                )
-            messages.success(self.request, f"{n_success} photo(s) uploaded.")
+            else:
+                messages.success(self.request, f"{n_success} photo(s) uploaded.")
+        
 
         # Notify administrators on new uploads
         gallery_url = reverse_lazy("photologue:pl-gallery", args=[gallery.slug])
         gallery_url = self.request.build_absolute_uri(gallery_url)
-        if uploaded_photo_name:
+        if uploaded_photo_name and (not response_json):
             photos = ", ".join(uploaded_photo_name)
             mail_admins(
                 subject=f"New upload from {self.request.user.username}",
                 message=f"{self.request.user.username} has uploaded in <{gallery_url}>:\n{photos}",
             )
 
-        return super().form_valid(form)
+        elif response_json and finish_json :
+            photos = ", ".join(uploaded_photo_name)
+            mail_admins(
+                subject=f"New continious upload from {self.request.user.username}",
+                message=f"{self.request.user.username} has uploaded multiples photo with continious upload in <{gallery_url}>",
+            )
+        if response_json :
+            jsondata["uploadeds"] = uploaded_photo_name
+            return JsonResponse(jsondata)
+
+        else :
+            return super().form_valid(form)