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
– Crowcoder, Commented Oct 28, 2018 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
– Adam Giebl, Commented Oct 28, 2018 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
– Camilo Terevinto, Commented Oct 28, 2018 at 14:28
I think the answer here may help: stackoverflow.com/questions/46640024/… — Ryan Cogswell
– Ryan Cogswell, Commented Oct 28, 2018 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
– Adam Giebl, Commented Oct 28, 2018 at 14:38

Adam Giebl · Accepted Answer · 2018-10-28 14:57:16Z

5

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);
    }

edited Oct 28, 2018 at 14:57

answered Oct 28, 2018 at 14:48

Adam Giebl

651 silver badge9 bronze badges

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

1 Comment

Camilo Terevinto Over a year ago

You should post the final edited code rather than just point at another question

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related