0

In a React App:

const onInputFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (!files || files.length === 0) {
        return;
    }

    const file = files[0];
    const formData = new FormData();
    formData.append("file", file);
    
    const uri = "path/to/my/endpoint/myc/12/upload";
    const fetchOptions = {
        method: "POST",
        headers: [["Content-Type", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"]],
        mode: "cors",
        body: formData
    };
    
    fetch(uri, fetchOptions).then(res => console.log(res));
};

return (
    <input
        onChange={onInputFileChange}
        type="file"
        accept={".xslx"}
    />
);

I am sending an Excel file. I have the following controller:

[HttpPost("myc/{id}/upload")]
//[Consumes("multipart/form-data")] // This line is commented intentionally
public ActionResult UploadExcelFile(string id)
{
    var form = this.Request.Form; // Exception here!!!
    return Ok();
}

When I set a breakpoint in the method (beginning), I see it is hit. When I step further in the first line, an exception is thrown when reading Form:

System.InvalidOperationException: 'Incorrect Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'

Attempt I

If I remove the comment in the attribute Consumes, I never get to the method; instead I get a 415 Unsupported media Type.

Attempt II

If I set the controller's Consumes and the request's Content-Type both to: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, I get the same error:

System.InvalidOperationException: 'Incorrect Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'

Attempt III

If I change the controller like this:

[HttpPost("myc/{id}/upload")]
//[Consumes("multipart/form-data")]
public ActionResult UploadExcelFile(string id, IFormFile file)
{
    var form = this.Request.Form;
    return Ok();
}

I get a 400 Bad Request and do not hit the method.


How exactly am I supposed to make this work?

1
  • Do you know how you got this to work? Commented Jun 4, 2022 at 23:19

1 Answer 1

1

Just omit Content-Type header in request and browser will set a correct one for you. Since correct value for FormData is Content-Type: multipart/form-data; boundary=something you need to let browser to set valid boundary value for you.

const file = files[0];
const formData = new FormData();
formData.append("file", file);

const uri = "path/to/my/endpoint/myc/12/upload";
const fetchOptions = {
    method: "POST",
    mode: "cors",
    body: formData
};

fetch(uri, fetchOptions).then(res => console.log(res));
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.