Upload file in MVC Core via Ajax

Question

I need to upload file in MVC Core via Ajax post request. My Index.cshtml

<input id="addLogoFile" type="file" class="form-control" accept="image/png" />
<input id="addLogoText" type="text" class="form-control" placeholder="Logo title" />
<button type="button" id="addLogoBtn" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-repeat"></span></button>

$("#addLogoBtn").click(function (e) {
    e.preventDefault();
    var fileInput = $("#addLogoFile");
    var formData = new FormData();
    var fileTitle = $("#addLogoText").val();
    var file = fileInput[0].files[0];
    formData.append(file.name, file);
    var request = $.ajax({
        url: '@Url.Action("AddLogo", "OrganizationManagement")',
        type: "POST",
        cache: false,
        processData: false,
        data: { image: formData, imageName: file.name, title: fileTitle },
        datatype: "json"
    })
    request.done(function (data) {
        var logos = $("#Logos");
        logos.empty();
        $.each(data, function () {
            logos.append($("<option />").val(this.Value).text(this.Text));
        })
    })
    request.fail(function (e) {
        $("#addLogoText").val(e.responseText);
    })
})

My ExampleController.cs:

[HttpPost]
public async Task<JsonResult> AddLogo(IFormFile image, string imageName, string title)
{
    //code doesn't matter, null in image, imageName and title
}

The problem, is that image, imageName, title are always null. How should I fix it?

EDIT

If I add contentType: false i have this error in my Network Debugger: The server encountered an unexpected condition that prevented it from fulfilling the request

?? Do you mean you get a 500(Internal Server Error)? Id so the code in your controller is throwing an exception. Also it does not make sense that you adding values to `formData` and then adding them again in the `data` option. Suggest you look at [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) — , Apr 05 '16 at 11:13
@StephenMuecke yes, I mean a 500 (Internal Server Error). What's wrong with the controller than? Edited answer, removed adding values to `formData`, this is not the problem. HttpPostedFileBase was using for asp.net 5, but now, I'm looking for solution based on asp.net 6. And it also affects error 500< even without `contentType: false` — Yurii N., Apr 05 '16 at 11:31
It the same code (just `IFormFile` instead of `HttpPostedFileBase`). And debug your code to determine the error, including using your browser tools (Network tab) to inspect the response which will give you the error details. — , Apr 05 '16 at 11:36
@StephenMuecke yes, code the same, but still doesn't work. I tried to debug my controller, i have null in every method property, or even don't go into the controller and stop on the breakpoint. — Yurii N., Apr 05 '16 at 11:40
@StephenMuecke I have this error in Network debugger: _The server encountered an unexpected condition that prevented it from fulfilling the request_ — Yurii N., Apr 05 '16 at 11:43
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/108273/discussion-between-stephen-muecke-and-yuriy-n). — , Apr 05 '16 at 11:49

Upload file in MVC Core via Ajax

0 Answers0