Face Manager : enable uploading multiple images concurrently

+ if an image is re-added it will replace it in the UI to the beginning of the face container

plugins/face/faceManagerCustomAutoLoadLibrary/index.js

@@ -144,7 +144,7 @@ module.exports = function(s,config,lang,app,io){
             }))
         },res,req)
     })
-    app.post(config.webPaths.superApiPrefix+':auth/faceManager/image/:name/:image', fileUpload(), function (req,res){
+    app.post(config.webPaths.superApiPrefix+':auth/faceManager/image/:name', fileUpload(), function (req,res){
         s.superAuth(req.params,function(resp){
             res.setHeader('Content-Type', 'application/json')
             var fileKeys = Object.keys(req.files || {})
@@ -152,8 +152,7 @@ module.exports = function(s,config,lang,app,io){
                 return res.status(400).send('No files were uploaded.')
             }
             var filesUploaded = []
-            fileKeys.forEach(function(key){
-                var file = req.files[key]
+            var checkFile = (file) => {
                 if(file.name.indexOf('.jpg') > -1 || file.name.indexOf('.jpeg') > -1){
                     filesUploaded.push(file.name)
                     if(!fs.existsSync(config.facesFolder + req.params.name)){
@@ -169,6 +168,21 @@ module.exports = function(s,config,lang,app,io){
                         })
                     })
                 }
+            }
+            fileKeys.forEach(function(key){
+                var file = req.files[key]
+                try{
+                    if(file instanceof Array){
+                        file.forEach(function(fileOfFile){
+                            checkFile(fileOfFile)
+                        })
+                    }else{
+                        checkFile(file)
+                    }
+                }catch(err){
+                    console.log(file)
+                    console.log(err)
+                }
             })
             var response = {
                 ok: true,

plugins/face/faceManagerCustomAutoLoadLibrary/web/libs/js/super.faceManager.js

@@ -105,6 +105,14 @@ $(document).ready(function(){
             revert: "invalid"
         });
     }
+    var createFaceImageBlock = function(row,faceName,fileName){
+        var existingBlock = row.find(`[face="${faceName}"][image="${fileName}"]`)
+        if(existingBlock.length > 0){
+            existingBlock.draggable('destroy')
+            existingBlock.remove()
+        }
+        row.prepend(getFaceImageHtml(faceName,fileName))
+    }
     faceManagerModal.on('shown.bs.modal',function(){
         drawFaceImages()
     })
@@ -132,21 +140,17 @@ $(document).ready(function(){
         return false;
     })
     $('#fileinput').change(function(){
-        for(var i = 0; i<this.files.length; i++){
-            var name = faceNameField.val()
-            var file =  this.files[i];
-            if(!file)return;
-            $.ajax({
-              url: superApiPrefix + $user.sessionKey + '/faceManager/image/' + name + '/' + file.name,
-              type: 'POST',
-              data: new FormData(faceManagerForm[0]),
-              cache: false,
-              contentType: false,
-              processData: false,
-            },function(data){
-                console.log(data)
-            })
-        }
+        var name = faceNameField.val()
+        $.ajax({
+          url: superApiPrefix + $user.sessionKey + '/faceManager/image/' + name,
+          type: 'POST',
+          data: new FormData(faceManagerForm[0]),
+          cache: false,
+          contentType: false,
+          processData: false,
+        },function(data){
+            console.log(data)
+        })
     })
     $('#tablist').append('<li class="nav-item">\
         <a class="nav-link" data-toggle="modal" data-target="#faceManager">' + lang.faceManager + '</a>\
@@ -160,7 +164,7 @@ $(document).ready(function(){
                     row = faceManagerImages.find(`.row[face="${d.faceName}"]`)
                     activateDroppableContainer(d.faceName)
                 }
-                row.prepend(getFaceImageHtml(d.faceName,d.fileName))
+                createFaceImageBlock(row,d.faceName,d.fileName)
                 activateDraggableImages()
                 prettySizeFaceImages()
             break;