Debugueando la subida de archivos ( En seguimiento a: ¿Cómo subir múltiples archivos al servidos usando MongDb, Express y NodeJS? )

Question

En seguimiento a mi post anterior he podido establecer en qué parte se produce el error al subir dos o más archivos, lo comparto para aportar más antecedente que faciliten la ayuda que me puedan prestar. Gracias por su atención y tiempo. A continuación describo la situación:

1.-Base MongoDb: sin documentos 2. Carpeta upload: Vacía

En la app: (subida de un solo archivo)

1.- Al seleccionar el archivo a cargar:

a) Se produce el evento “fileChangeEvent” y le paso la variable “$event” que tendrá todos los datos que capture (en este caso el archivo seleccionado”)

fileChangeEvent(fileinput:any){
    console.log(' My fileinput entrega:  ' );
    console.log( fileinput );
    this.filesToUpload = fileinput.target.files as Array<File>;
  }

En la consola puedo ver:

1.  Event {isTrusted: true, type: "change", target: input, currentTarget: input, eventPhase: 2, …}
1.  isTrusted: true
2.  type: "change"
3.  target: input
1.  accept: ""
2.  alt: ""
3.  autocomplete: ""
4.  defaultChecked: false
5.  checked: false
6.  dirName: ""
7.  disabled: false
8.  form: form.ng-dirty.ng-touched.ng-valid
9.  **files: FileList**
1.  **length: 1**
2.  **0: File {name: "Playa.jpg", lastModified: 1576198518688, lastModifiedDate: Thu Dec 12 2019 21:55:18 GMT-0300 (hora de verano de Chile), webkitRelativePath: "", size: 25559, …}**
3.  __proto__: FileList
10. formAction: "http://localhost:4200/crear-proyecto"

Si le doy al Submit “Enviar” se ejecuta el código:

onSubmit(form){

    *console.log('Esto se va en el project')*
    *console.log(this.project);*
    // Guardar datos básicos
    this._projectService.saveProject(this.project).subscribe(

        response => {
          if(response.project){

              // Subir la imagen... solo cuando la deba subir!
              if(this.filesToUpload){
                *console.log( "El filesToUpload, en mi 'create.component.ts' tiene:  " );*
                *console.log( this.filesToUpload);*

                this._uploadService.makeFileRequest(Global.url + 'upload-image/' + response.project._id, [], this.filesToUpload, 'image').
                        then((result:any) => {
                  this.save_project = result.project;
                  this.status = 'success';
                  console.log('El result me entrega:   ');
                  console.log(result);

                  // Con esto vacío el formulario una vez que ya se ha guardado
                  form.reset();
                });

              }else{
                this.save_project = response.project;
                this.status = 'success';
                form.reset();

              }

            }else{
              this.status = 'failed';
            }
        },
        error => {
          console.log(<any>error); 
        }

    );
  }

** Y en la consola puedo ver:**

Esto se va en el project
1.  Project {_id: "", name: "er", description: "er", category: "er", year: 2019, …}
El filesToUpload, en mi 'create.component.ts' tiene: 
1.  FileList {0: File, length: 1}
El result me entrega: 
1.  {project: {…}}
1.  project: {image: Array(1), _id: "5e5a851136dc6835e02bc536", name: "er", description: "er", category: "er", …}
2.  __proto__: Object

Y todo ha funcionado bien! (subiendo un solo archivo):

Base MongoDb: Tiene un nuevo documento:

{
    "_id" : ObjectId("5e5a851136dc6835e02bc536"),
    "image" : [ 
        "LFjKzVMVqRrDXImUBXeCztw5.jpg"
    ],
    "name" : "er",
    "description" : "er",
    "category" : "er",
    "year" : 2019,
    "langs" : "er",
    "__v" : 0
}

Carpeta upload: Tiene el archivo que se ha subido!!

¿Pero qué sucede al subir dos o más archivos?

1.- Al seleccionar los archivos a cargar:

a) Se produce el evento “fileChangeEvent” y le paso la variable “$event” que tendrá todos los datos que capture (en este caso el archivo seleccionado”)

En la consola puedo ver :

1.  Event {isTrusted: true, type: "change", target: input, currentTarget: input, eventPhase: 2, …}
1.  isTrusted: true
2.  type: "change"
3.  target: input
1.  accept: ""
2.  alt: ""
3.  autocomplete: ""
4.  defaultChecked: false
5.  checked: false
6.  dirName: ""
7.  disabled: false
8.  form: form.ng-dirty.ng-touched.ng-valid
9.  files: FileList
1.  length: 4
2.  0: File {name: "Ardilla.jpg", lastModified: 1576198194770, lastModifiedDate: Thu Dec 12 2019 21:49:54 GMT-0300 (hora de verano de Chile), webkitRelativePath: "", size: 9233, …}
3.  1: File {name: "conejo.jpg", lastModified: 1576198212660, lastModifiedDate: Thu Dec 12 2019 21:50:12 GMT-0300 (hora de verano de Chile), webkitRelativePath: "", size: 8521, …}
4.  2: File {name: "elefantes.jpg", lastModified: 1576198231018, lastModifiedDate: Thu Dec 12 2019 21:50:31 GMT-0300 (hora de verano de Chile), webkitRelativePath: "", size: 6930, …}
5.  3: File {name: "FotoParaMi.jpg", lastModified: 1573171030188, lastModifiedDate: Thu Nov 07 2019 20:57:10 GMT-0300 (hora de verano de Chile), webkitRelativePath: "", size: 63185, …}
6.  __proto__: FileList
10. formAction: http://localhost:4200/crear-proyecto

2. Si le doy al Submit “Enviar” se ejecuta el código que compartí más arriba, en el caso de subida de un solo archivo

En la consola puedo ver:

Esto se va en el project
1.  Project {_id: "", name: "tr", description: "tr", category: "tr", year: 2019, …}
1.  FileList {0: File, 1: File, 2: File, 3: File, length: 4}
1.  length: 4
2.  0: File {name: "Ardilla.jpg", lastModified: 1576198194770, lastModifiedDate: Thu Dec 12 2019 21:49:54 GMT-0300 (hora de verano de Chile), webkitRelativePath: "", size: 9233, …}
3.  1: File {name: "conejo.jpg", lastModified: 1576198212660, lastModifiedDate: Thu Dec 12 2019 21:50:12 GMT-0300 (hora de verano de Chile), webkitRelativePath: "", size: 8521, …}
4.  2: File {name: "elefantes.jpg", lastModified: 1576198231018, lastModifiedDate: Thu Dec 12 2019 21:50:31 GMT-0300 (hora de verano de Chile), webkitRelativePath: "", size: 6930, …}
5.  3: File {name: "FotoParaMi.jpg", lastModified: 1573171030188, lastModifiedDate: Thu Nov 07 2019 20:57:10 GMT-0300 (hora de verano de Chile), webkitRelativePath: "", size: 63185, …}
6.  __proto__: FileList

Hasta aquí, todo bien… el problema se produce a partir de esta línea de código en mi "create.component.ts"

                this._uploadService.makeFileRequest(Global.url + 'upload-image/' + response.project._id, [], this.filesToUpload, 'image').
                        then((result:any) => {
                  this.save_project = result.project;
                  this.status = 'success';
                  console.log('El result me entrega:   ');
                  console.log(result);

                  // Con esto vacío el formulario una vez que ya se ha guardado
                  form.reset();
                });

              }else{
                this.save_project = response.project;
                this.status = 'success';
                form.reset();

              }

            }else{
              this.status = 'failed';
            }
        },
        error => {
          console.log(<any>error); 
        }

    );
  }

Base MongoDb: Tiene un nuevo documento, pero “image”, ahora, es “null”:

{
    "_id" : ObjectId("5e5a8c6c36dc6835e02bc537"),
    "image" : null,
    "name" : "tr",
    "description" : "tr",
    "category" : "tr",
    "year" : 2019,
    "langs" : "tr",
    "__v" : 0
}

Carpeta upload: Tiene el archivo cargado en la subida de un solo archivo, más los cuatro archivos que seleccioné en la subida de dos archivos o más