How to send FormData from javascript to ASP.NET Core 2.1 web API using fetch

Question

i'm trying to create a form that sends FormData object to API controller that serializes the data to Article class, but i cannot get it to work. I have already tried the things that are commented.

this is my HTML:

<form onsubmit="postArticle()">
<input type="type" name="Title" value="" />
<input type="type" name="Content" value="" />
<input type="submit" value="Submit" />
</form>

this is my JS:

<script>

var postArticle = () => {
    event.preventDefault();
    var Article = new FormData(this.event.target);
    console.log([...Article]);
    fetch('/api/Articles', {
        headers: {
            'Content-Type': 'multipart/formdata',
            //'Content-Type': 'application/json'
        },
        method: "POST",
        body: Article
        //body: JSON.stringify(Article)
    })
}
</script>

Controller:

    // POST: api/Articles
    [HttpPost]
    public async Task<IActionResult> PostArticle(Article article)
    {
        string name = article.Title;
        if (!ModelState.IsValid)
        {
            return Ok();
        }

        _context.Article.Add(article);
        await _context.SaveChangesAsync();

        return Ok();
    }

and my Article class:

public class Article
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Content { get; set; }
}

What does happen? Does you F12 browser dev tools show anything in the console or network tab? Does your controller get hit at all? More input.... — Crowcoder, Oct 28 '18 at 14:17
yes, sorry i forgot to mention that, the request returns 400, and the response is : {"":["The input was not valid."]} — Adam Giebl, Oct 28 '18 at 14:18
Two things: you are not posting an Id field, which is required; and you could try to use `PostArticle([FromForm] Article article)` — Camilo Terevinto, Oct 28 '18 at 14:28
I think the answer here may help: https://stackoverflow.com/questions/46640024/how-do-i-post-form-data-with-fetch-api — Ryan Cogswell, Oct 28 '18 at 14:31
@CamiloTerevinto Ok, i added [FromForm] and i made new model where there is not Id at all, now the request returned 200 (ok) but none of the form data actually came into the article model (Title= null, Content=null) — Adam Giebl, Oct 28 '18 at 14:38
You should see in the browser's developer console what's actually being sent — Camilo Terevinto, Oct 28 '18 at 14:44
**Works now!** The solution is to not set any content-type headers along with adding the [FromForm], thank you all contributing. — Adam Giebl, Oct 28 '18 at 14:45

Adam Giebl · Accepted Answer · 2018-10-28T14:57:16.307

Works now! The solution is to not set any content-type headers along with adding the [FromForm], thank you all contributing.

part of the solution was at this thread

these are the changes:

var postArticle = () => {
    event.preventDefault();
    var Article = new FormData(this.event.target);
    console.log([...Article]);
    fetch('/api/Articles', {
        method: "POST",
        body: Article
    })
}

// POST: api/Articles
    [HttpPost]
    public async Task<IActionResult> PostArticle([FromForm]Article article)
    {
        string name = article.Title;
        if (!ModelState.IsValid)
        {
            return Ok();
        }

        //_context.Article.Add(article);
        //await _context.SaveChangesAsync();

        return Ok(); //CreatedAtAction("GetArticle", new { id = article.Id }, article);
    }

You should post the final edited code rather than just point at another question — Camilo Terevinto, Oct 28 '18 at 14:49

How to send FormData from javascript to ASP.NET Core 2.1 web API using fetch

1 Answers1