将包含数据和文件的javascript对象发送到asp.net核心

Question

I need send data with file in a javascript object to asp.net core but when it arrives at the asp.net core method, arrives with null values ( List<Upload> listUpload )

I did a test removing the File property from the javascript object and it does not appear anymore null, the problem is with the File property that it can not map with the model property called File of type IFormFile.

javascript code:

jQuery('#tblDocuments > tbody > tr').each(function () {
   checkBox = jQuery(this).find('td').eq(0).children();

   inputFile = jQuery(this).find('td').eq(2).children()[0].files[0]; 

    let Upload = {
        File: inputFile,
        CodigoVendaArquivo: res,
        CodigoClienteArquivo: cliente,
        Checkbox: checkBox[0].id
    };
    listUpload.push(Upload);
});

I'm trying to send with fetch :

fetch('../../upload', {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(listUpload)
}).then(res => res.json())
.then(res => {

    if (res == 1) {
     // success
    }

});

Here's my asp.net core method:

[Route("upload")]
[HttpPost]
public JsonResult Upload([FromBody] List<Upload> listUpload)
{
    // something
}

Here's my Model:

public class Upload
{
    public IFormFile File { get; set; }
    public string CodigoVendaArquivo { get; set; }
    public string CodigoClienteArquivo { get; set; }
    public string Checkbox { get; set; }
}

Answer 1

Avoid embedding an IFormFile within the Upload class. When uploading something like IList<Upload> where its list item has a property of IFormFile , you might encounter an bug that results in a crazy memory leak (It ate me about 6.7G memory until I address it). For more information, see

• ASP.NET Core #4802
• ASP.NET MVC #8782

The easiest way to walk around it, as WahidBitar comments on GitHub , is to create a wrapper to receive the payload.

---

As for your question itself, you should avoid embedding an IFormFile within the Upload class.

Here's a working sample :

public class UploadPayload{
    public IList<Upload> Uploads{get;set;}

    public class IFormFileWrapper {
        public IFormFile File { get; set; }
    }
    public class Upload
    {
        // See https://github.com/aspnet/Mvc/issues/8782
        
 

 
 
  
  
 
  public IFormFile File { get; set; }
 

 
 
        public IFormFileWrapper CodigoFile { get; set; }
        public string CodigoVendaArquivo { get; set; }
        public string CodigoClienteArquivo { get; set; }
        public string Checkbox { get; set; }
    }
}

And also change your action method as below:

 
 
  
  
 
  public JsonResult Upload([FromBody] List listUpload)
 

 
 
public IActionResult Upload(UploadPayload listUpload)
{ 
    ... 
}

Client Side :

To construct a formData , create a getFormData() function :

    function getFormData(listUpload){
        var formData = new FormData();
        function getFieldName(index,name){
            return "Uploads[" + index + "]." + name ;
        };
        function getFileName(index,name){
            return "Uploads[" + index + "].CodigoFile." + name ;
        };

        for(var i =0 ;i <listUpload.length; i++){
            var upload = listUpload[i];
            formData.append(getFieldName(i, 'CodigoVendaArquivo'), upload.CodigoVendaArquivo);
            formData.append(getFieldName(i, 'CodigoClienteArquivo'), upload.CodigoClienteArquivo);
            formData.append(getFieldName(i, 'Checkbox'),upload.Checkbox)
            formData.append(getFileName(i, 'File'), upload.File);
        }
        return formData;
    }

Now we could send the formData in the following way:

jQuery('#tblDocuments > tbody > tr').each(function () {
        ...
        listUpload.push(Upload);
    }

    var formData = getFormData(listUpload);
    fetch('../../upload', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            
 

 
 
  
  
 
  'Content-Type': 'application/json'
 

 
 
        },
        
 

 
 
  
  
 
  body: JSON.stringify(listUpload),
 

 
 
        body:formData,
    })
    .then(res => res.json())
    .then(res => {
        if (res == 1) {
            // success
        }
    });