ASP.NET WebAPI - File Upload with FormData doesn't have all the form data fields - react-native

Question

I'm trying to upload a file with some form data using axios in React-Native as multipart/form-data to ASP.NET Web API.
I've followed this - https://learn.microsoft.com/en-us/aspnet/web-api/overview/advanced/sending-html-form-data-part-2
and I'm reading the file and form data using MultipartFormDataStreamProvider which seems to be getting both the file and form data. However, the form data isn't complete. For example, I'm sending about 14 fields to the server, but I'm only getting 7 when I try to read it through provider.FormData.
My React Native / Axios Code
var dataToSubmit = new FormData();
// Have about 14 fields in the FormData
dataToSubmit.append('Key1', 'value1');
dataToSubmit.append('Key2', 'value2');
dataToSubmit.append('Key3', 'value3');
.
.
dataToSubmit.append('Key14', 'value14');
// Have 1 file in the FormData
dataToSubmit.append('File', {
uri: filePath,
type: 'image/jpeg',
name: fileName
});
axios({
method: 'POST',
url: 'URL to post',
data: dataToSubmit,
headers: {
'Content-Type': 'multipart/form-data'
}
}).then((response) => {
console.log(response);
});
My Request
I have a debugger on the phone and I saw the following request (with all the 14 fields and the file)
POST /api/urltopost HTTP/1.1
accept: application/json, text/plain, */*
Content-Type: multipart/form-data;
boundary=BOUNDARY_GUID
Content-Length: 53038
Host: HOST_IP
Connection: Keep-Alive
Accept-Encoding: gzip
--BOUNDARY_GUID
content-disposition: form-data; name="Key1"
Content-Length: 24
--BOUNDARY_GUID
content-disposition: form-data; name="Key2"
Content-Length: 24
..
..
--BOUNDARY_GUID
content-disposition: form-data; name="File"
filename="test.jpg",
Content-Type: image/jpeg
Content-Length: 50626
My ASP.NET Web API Code
public async Task<HttpResponseMessage> PostFormData(DTO obj)
{
if (!Request.Content.IsMimeMultipartContent())
{
throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
}
string root = HttpContext.Current.Server.MapPath("~/App_Data");
var provider = new MultipartFormDataStreamProvider(root);
try
{
await Request.Content.ReadAsMultipartAsync(provider);
// Show all the key-value pairs.
foreach (var key in provider.FormData.AllKeys)
{
foreach (var val in provider.FormData.GetValues(key))
{
Trace.WriteLine(string.Format("{0}: {1}", key, val));
}
}
return Request.CreateResponse(HttpStatusCode.OK);
}
catch (System.Exception e)
{
return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
}
}
When I look at provider, it shows Contents with count 8, FileData with count 1 and FormData with 7 fields. But I seem to be missing other 7 fields.
NOTE:
I'm using OWIN
I tried uploading files from 21 KB to 5.2 MB. I always get the 8 contents. I even tried multipart/form-data submission without the file and I still get only those fields.
I have the following in my web.config to set request limit, which seems to have no impact with the buffer size of the provider -
<!-- Under system.webServer -->
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="2147483648" />
</requestFiltering>
</security>
<!-- Under system.web -->
<httpRuntime targetFramework="4.5.2" maxRequestLength="2097152" />
I tried using MultipartMemoryStreamProvider and it still gets the 8 contents.
I tried using Postman and I'm still getting the form data in chunk / 8 fields.
I tried setting the buffer size to 5120000 (since it's 4098 by default) for MultipartFormDataStreamProvider and I still get only those 8 fields. I can't seem to find why the other form fields aren't showing up / I can't get the value for them on the server side. I'm pretty sure I'm not doing anything wrong on the client side, since it's not working with Postman either. So I'm guessing it's just the way I'm reading Multipart data on the API.
Can someone tell me what I'm missing / doing wrong? Why am I not seeing all the fields that are sent through the form?

Answer 1

I couldn't figure out why the entire form data was not being submitted. So here is my workaround -
I'm making 2 calls to save the data -
A x-www-form-urlencoded request to save the FormData. I get the record ID / key from this save.
A multipart/form-data request to save the file with the key / identifier