Pass an array to a webapi controller

Question

I’m having trouble passing an array to a controller via Axios.

Example of the WEBAPI Controller code:

    [HttpGet]
    [ActionName("openshape")]
    [Route("api/shape/openshape")]
    public IEnumerable<Fields> OpenShape(FileOpen[] path)
    

When I send the request to React it arrives null in the WEBAPI.

Example of the method in React:

var  path = []; 
var ListSelect = Object.assign([], e.target.files); 


for(var i = 0; i < ListSelect.length; i++){
  let result = { data:'', fileName:''}
  var reader = new FileReader(); 
  reader.readAsDataURL(ListSelect[i]); 
  reader.onload = e => { 
    result.data = e.target.result.toString();  
  }
    
  result.fileName = ListSelect[i].name; 

  path.push(result); 
}

let obj = await api.get("/shape/openshape/", {params: {path: path}})

Example of the Fileopen class:

public class FileOpen
{
    public string Data { get; set; }
    public string fileName { get; set; }
}

Answer 1

The request you are trying to perform is a GET and requisitions GET semantically do not have body, ie do not receive complex objects in the body of the request.

What you can do is change the method to POST or PUT to solve the problem, but there is an issue that must be evaluated which is the context of the request if it is a request that will send data the methods POST and PUT resolve, but if it is a request that seeks information, should evaluate other alternatives:

Receive a parameter in the Controller via QueryString and converting the String to an array. That is, instead of sending the object on the request date, you would send a JSON as a string via the request parameter, receive this JSON in the Controller and convert this JSON into an object array. Below an example:

 [HttpGet]
 [ActionName("openshape")]
 [Route("api/shape/openshape")]
 public IEnumerable<Fields> OpenShape([FromUri] string path) {
   FileOpen[] paths = JsonConvert.DeserializeObject<FileOpen[]>(path);
 }

No React:

var  path = []; 
var ListSelect = Object.assign([], e.target.files); 

for(var i = 0; i < ListSelect.length; i++){
  let result = { data:'', fileName:''}
  var reader = new FileReader(); 
  reader.readAsDataURL(ListSelect[i]); 
  reader.onload = e => { 
    result.data = e.target.result.toString();  
  }
    
  result.fileName = ListSelect[i].name; 

  path.push(result); 
}

let pathStr = JSON.stringify(path);

let obj = await api.get("/shape/openshape/", {params: {path: pathStr}})