Angular 6 - Multiple file input in single form group

Question

I'm setting up an uploader for my Web Application which consists of 2 file input elements wherein the first file input will get the image and store it to the list of images variable and the second one will get the pdf and store it to the list of pdf files variable.

the approach that I did to it is to store the file objects in the variables I named as pdfStorage and imageStorage so it will be passed to dotnet core api service after filling up the necessary fields in my form and pressing confirm button.

I don't get problem on the client side when storing the file objects to the variable. however, as soon as I send those values to the service's parameters, it always shows null for those fields.

I've viewed Request.Form in the dotnet core service and I am seeing that it's there. I don't get why it's not being populated to the ActionResult's parameter.

Here is the code that I placed in dotnet core service:

ActionResult:

[HttpPost("SaveNewData"),DisableRequestSizeLimit]
[Consumes("multipart/form-data")]
public ActionResult SaveNewData([FromForm]MyModelUpload modelUpload) {
    var modelUploaded = modelUpload;
    return Ok();
}

Model in parameter:

public class MyModelUpload {
    public IFormFile[] imageFile { get; set; }
    public string description {get;set;}
    public IFormFile[] pdfFileList {get;set;}
    public string uploadedBy { get; set; }
    public string title { get; set; }
    public DateTime? dateEnd {get; set;}
}

And here is the test code that I used for sending the form data in angular:

SaveNewData(formGroupData) {
    let submitData = new FormData();
    let pdfFileArray = formGroupData.pdfStorage;

    // UPLOAD'S DETAIL
    submitData.append('title',formGroupData.title);
    submitData.append('description',formGroupData.title);
    submitData.append('uploadedBy',formGroupData.uploadedBy);
    submitData.append('dateEnd',formGroupData.dateEnd);

    // // FOR IMAGE FILE
    let imageFileObject = <File>formGroupData.imageStorage[0];
    console.log(pdfFileArray);
    submitData.append('imageFile[]',imageFileObject,imageFileObject.name);

    // // LIST OF PDF DOCS
    for(let arrayIndex in pdfFileArray) { 
        submitData
            .append(`pdfFileList[]`,pdfFileArray[arrayIndex]
                ,pdfFileArray[arrayIndex].name);
    }

    return this.http
        .post(`http://localhost:5000/Upload/SaveNewData`,submitData);
}

How do I send those file objects I stored on my storage variables?

Answer 1

You should use this:

 SaveNewData(formGroupData) {
    let submitData = new FormData();
    let pdfFileArray = formGroupData.pdfStorage;

    // UPLOAD'S DETAIL
    submitData.append('title',formGroupData.title);
    submitData.append('description',formGroupData.title);
    submitData.append('uploadedBy',formGroupData.uploadedBy);
    submitData.append('dateEnd',formGroupData.dateEnd);

    // // FOR IMAGE FILE
    let imageFileObject = <File>formGroupData.imageStorage[0];
    console.log(pdfFileArray);
    submitData.append('imageFile',imageFileObject);

    // // LIST OF PDF DOCS

   for (let i = 0; i < pdfFileArray.length; i++) {
     submitData.append("pdfFileList",pdfFileArray[i]);
    }

    return this.http
        .post(`http://localhost:5000/Upload/SaveNewData`,submitData);
}