API Works on Swagger but Failed on Web Page

JavaScript
1

Using Swagger my API successfully uploads an image from my computer to a folder in my project in Visual Studio . However when I tried uploading an image from my computer to my project folder using the upload button on my web page, I got the error code 400 bad request. I understand that this means my request is malformed among other things. I checked the API URL and it is the exact same URL I used on Swagger and I’ve already cleared my browser cache. I’m not sure what else I need to check as the error is very vague.

The following are my markup and script.

<form class="form" id="myForm">
    <input type="file" id="inpFile"  /><br/>
    <button type="submit">Submit</button>
</form>
const myForm = document.querySelector("#myForm");
const inpFile = document.querySelector("#inpFile");
myForm.addEventListener("submit", (e) => {
    e.preventDefault();
    const endpoint = 'https://localhost:7209/api/Main/UploadFile';
    const formData = new FormData();
    formData.append("inpFile", inpFile.files[0]);
    fetch(endpoint, {
        method: "post",
        body: formData
    }).catch(console.error);
})
2

This line is wrong. It wouldn’t be localhost on your server.

3

Hi thanks for replying. The project is still on my local machine and not yet deployed to a server. So localhost is the server.

4

Then check the path and check the port.

Do you have a SSL cert running on localhost (even if self-signed)?

If you enter the URL in the browser, does it find it? I’d guess not.

5

why are we sending just part of the file input?
why does the file input not have a name?
why are we manually constructing FormData for an actual form?

6

Your client code is correct, I just checked the same code again my server, and I can upload files.

I would have done it like this, but your code is fine

<form method=post action="/api/Main/UploadFile" enctype=multipart/form-data>
        <input type=file name=inpFile>
        <input type=submit value=Upload>
 </form>

I suspect something, but before I can say anything can you put your swagger code here?.

7

Hi, in command prompt I CDed into my solution folder which contains two projects a dotnet core web API project and a dotnet core web project containing only a static web page. Then I created a self signed ssl cert using the following command

dotnet dev-certs https --trust

Unfortunately I still get the 400 bad request error. Also when I pasted the web api endpoint into the browser I got the error

This site can’t be reached

**localhost** refused to connect.

I think it only works using IISExpress or some other server.

8

I think the name is added when you pass it in as an argument to the FormData append method like this formData.append(“inpFile”, inpFile.files[0])

9

That means the port is blocked in IIS. You need to enable it for it to work.

But if you’re running iisexpress and not a windows instance which includes IIS, that is probably your issue. You’ll need to deploy it to hosting (and change the URL since it will no longer be localhost) and try it there.

10

IISExpress is in Visual Studio and when I run a web page in Visual Studio which makes a post request to the Web API it should just work like it did in past versions but I’m not sure what I need to configure in the version that I’m using. One thing I also don’t understand is if the port I’m using is blocked in IIS how come I was able to successfully upload an image using the API in Swagger which is built into Visual Studio. I’m really frustrated as I can’t even do my development work and test my code.

11

IIS and IIE Express are not the same thing. IIS express is a “dumbed down” version of IIS, which means things like security and such are ignored.

12

Hi thanks for your reply. The script is correct and you reminded me to check my server side code which turns out to be the culprit.

13

I finally resolved this issue. It turns out the issue was a minor mistake which was the following line
formData.append("inpFile", inpFile.files[0]);
The string “inpFile” which is passed to the append method above as one of its arguments has to match the argument passed to the API controller method in the server side code but it was spelled with an uppercase “F” instead of lowercase “f” and that made the cause of the error hard to spot.