Why are the arrays null when I'm sending form data using .NET API and React?

Question

DTO looks like this:

public List<IFormFile> Images { get; set; }
public int[] Numbers { get; set; }

Method Signature:

public async Task<IActionResult> AddSection([FromForm]TheDto theDto)

Add the form data in React:

const handleSubmit = (data: any) => {
    const formData  = new FormData();

    for(const name in data) {
        formData.append(name, data[name]);
    }

    postService.addSection(formData);
}

It's then sent using axios.

Other values go through fine which are not in an array. I've inspected the data being added to FormData and the data is correct, I have 2 arrays, one holding File[], the other holding number[] and the names match that of the DTO so I'm now at a loss. Have I missed something?

I've used the same method on a single image and that's worked fine.

Edit: If I log data in the above function, data has this:

{images: Array(2), numbers: Array(3)}
images: (2) [File, File]
numbers: (3) [40, 43, 77]

Further edit: I can see that the issue is that when I'm appending the data, I'm only adding the string value for the arrays. So I think that the 2 issues are making sure I'm appending the data in the arrays properly and in a way that the .NET array understands to bind the data correctly.

Can you show what is the value of data?

Yong Shun
– Yong Shun

2022-04-30 09:05:40 +00:00
Commented Apr 30, 2022 at 9:05 — Yong Shun
– Yong Shun, Commented Apr 30, 2022 at 9:05
Added data to the post, thanks.

MM1010
– MM1010

2022-04-30 09:13:59 +00:00
Commented Apr 30, 2022 at 9:13 — MM1010
– MM1010, Commented Apr 30, 2022 at 9:13

MM1010 · Accepted Answer · 2022-04-30 16:38:42Z

1

There may be a better way of doing this and I'd be happy to listen to any better ways but I changed the way I appended the data for the arrays, it's now working ok.

for(const name in data) {
    if (Array.isArray(data[name]) {
        for (let i = 0; i < data[name].length; i++) {
            formData.append(name, data[name][i]);
        }
    } else {
        formData.append(name, data[name]);
    }
}

edited Apr 30, 2022 at 16:38

answered Apr 30, 2022 at 9:41

MM1010

5911 gold badge11 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yong Shun Over a year ago

Looks fine. You can use Array.isArray() to check for data[name] as alternative of checking by the field name.

Collectives™ on Stack Overflow

Why are the arrays null when I'm sending form data using .NET API and React?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related