upload multiple files

2 files changed, 44 insertions, 14 deletions

diff --git a/accounts/templates/accounts/index.html b/accounts/templates/accounts/index.html
index 7f1f449..2c06113 100644
--- a/accounts/templates/accounts/index.html
+++ b/accounts/templates/accounts/index.html
@@ -253,7 +253,7 @@
               <div class="file-field input-field">
                 <div class="btn teal">
                   <span><i class="material-icons left">file_upload</i>File</span>
-                  <input type="file" name="vac_certificate" id="vac_certificate">
+                  <input type="file" name="vac_certificate" id="vac_certificate" multiple>
                 </div>
                 <div class="file-path-wrapper">
                   <input id="vac_file" value="{{vac_certificate}}" class="file-path" type="text" placeholder="Certificato di vacinazione">
@@ -273,7 +273,7 @@
               <div class="file-field input-field">
                 <div class="btn teal">
                   <span><i class="material-icons left">file_upload</i>File</span>
-                  <input type="file" name="health_care_certificate" id="health_care_certificate">
+                  <input type="file" name="health_care_certificate" id="health_care_certificate" multiple>
                 </div>
                 <div class="file-path-wrapper">
                   <input id="health_care_file" value="{{health_care_certificate}}" class="file-path" type="text" placeholder="Tessera cassa malati">
@@ -354,16 +354,22 @@ $(document).ready(function() {
   {% endif %}
 
   document.getElementById("vac_certificate").onchange = function() {
-    if(this.files[0].size > 1048576*10){
-      M.toast({html: 'Il file è troppo grande. Grandezza massima 10MB', classes: 'orange'});
-      this.value = "";
+    for (i=0; i < this.files.length; i++) {
+      if(this.files[i].size > 1048576*10) {
+        M.toast({html: 'Il file è troppo grande. Grandezza massima 10MB', classes: 'orange'});
+        this.value = "";
+        break;
+      }
     }
   };
 
   document.getElementById("health_care_certificate").onchange = function() {
-    if(this.files[0].size > 1048576*10){
-      M.toast({html: 'Il file è troppo grande. Grandezza massima 10MB', classes: 'orange'});
-      this.value = "";
+    for (i=0; i < this.files.length; i++) {
+      if(this.files[i].size > 1048576*10) {
+        M.toast({html: 'Il file è troppo grande. Grandezza massima 10MB', classes: 'orange'});
+        this.value = "";
+        break;
+      }
     }
   };
 
diff --git a/accounts/views.py b/accounts/views.py
index 9b5884b..9bdfacf 100644
--- a/accounts/views.py
+++ b/accounts/views.py
@@ -147,28 +147,52 @@ def personal(request):
 
         # check if user uploaded a file
         if "vac_certificate" in request.FILES:
-            myfile = request.FILES['vac_certificate']
+            files = request.FILES.getlist('vac_certificate')
+            name = files[0].name
             try:
-                im = Image.open(myfile)
+                # if multiple files concatenate pictures
+                if len(files) == 1:
+                    im = Image.open(files[0])
+                else:
+                    im = Image.open(files.pop(0))
+                    for f in files:
+                        i = Image.open(f)
+                        dst = Image.new('RGB', (im.width + i.width, max(im.height, i.height)), (255, 255, 255))
+                        dst.paste(im, (0, 0))
+                        dst.paste(i, (im.width, 0))
+                        im = dst
+
                 im_io = BytesIO()
                 # compress image in WEBP
                 im.save(im_io, 'WEBP', quality=50, method=4)
                 medic.vac_certificate.save(
-                    request.user.username+"_"+myfile.name, im_io)
+                    request.user.username+"_"+name, im_io)
                 medic.save()
             except UnidentifiedImageError:
                 error = True
                 error_text = "Il file non è un immagine valida"
 
         if "health_care_certificate" in request.FILES:
-            myfile = request.FILES['health_care_certificate']
+            files = request.FILES.getlist('health_care_certificate')
+            name = files[0].name
             try:
-                im = Image.open(myfile)
+                # if multiple files concatenate pictures
+                if len(files) == 1:
+                    im = Image.open(files[0])
+                else:
+                    im = Image.open(files.pop(0))
+                    for f in files:
+                        i = Image.open(f)
+                        dst = Image.new('RGB', (im.width + i.width, max(im.height, i.height)), (255, 255, 255))
+                        dst.paste(im, (0, 0))
+                        dst.paste(i, (im.width, 0))
+                        im = dst
+
                 im_io = BytesIO()
                 # compress image in WEBP
                 im.save(im_io, 'WEBP', quality=50, method=4)
                 medic.health_care_certificate.save(
-                    request.user.username+"_"+myfile.name, im_io)
+                    request.user.username+"_"+name, im_io)
                 medic.save()
             except UnidentifiedImageError:
                 error = True