Error code 400 when uploading files using bootstrap fileinput plugin

Question

I have an issue where seemingly no matter what I do, no matter how many files, no matter if I remove the extraData option and no matter if I use parameters in the controller action the action is never reached (my breakpoint never triggers).

HTML code:

<div id="logoDiv">
     <input id="fileInput" name="files" type="file" 
      data-allowed-file-extensions='["png", "jpg", "jpeg", "tiff"]' multiple/>
</div>

Javascript code:

var plugin = $('#fileInput').fileinput({
        showCaption: false,
        showPreview: true,
        dropZoneEnabled: false,
        theme: "fa",
        browseClass: "btn btn-ey-upload btn-ey-utility",
        removeClass: "btn btn-ey-upload btn-ey-utility",
        uploadClass: "btn btn-ey-upload btn-ey-utility",
        showClose: false,
        uploadAsync: false,
        uploadUrl: "/GeneralInterview/UploadLogo",
        //uploadExtraData: { id: 1 }
    });

Controller code:

[HttpPost]
public JsonResult UploadFile(List<IFormFile> files)
{
     List<string> fileNames = new List<string>();

     return Json(fileNames)
}

I have tried both as IActionResult and JsonResult as well.

I am really lost as to what is going wrong, any other resources seem to do exactly what I do but it is just not working.

EDIT: Response and request headers

content-length: 0
content-security-policy: default-src 'self'; style-src 'self' fonts.googleapis.com 'unsafe-inline'; font-src 'self' fonts.gstatic.com; script-src 'self' https://ajax.aspnetcdn.com 'nonces-SNIP'; img-src 'self' data:;
date: Fri, 04 Sep 2020 07:26:48 GMT
status: 400
x-content-type-options: nosniff
x-frame-options: DENY
x-powered-by: ASP.NET
x-rate-limit-limit: 7d
x-rate-limit-remaining: 999965
x-rate-limit-reset: 2020-09-11T07:24:01.3268956Z
x-sourcefiles: =?UTF-8?B?QzpcVXNlcnNcR1gyNjRMSFxTb3VyY2VcUmVwb3NcRU9ZLUVZXEVPWVdlYlxHZW5lcmFsSW50ZXJ2aWV3XFVwbG9hZExvZ28=?=
x-xss-protection: 1;mode=block


Request URL: https://localhost:44357/GeneralInterview/UploadLogo
Request Method: POST
Status Code: 400 
Remote Address: [::1]:44357
Referrer Policy: no-referrer-when-downgrade
content-length: 0
content-security-policy: default-src 'self'; style-src 'self' fonts.googleapis.com 'unsafe-inline'; font-src 'self' fonts.gstatic.com; script-src 'self' https://ajax.aspnetcdn.com 'nonces-SNIP'; img-src 'self' data:;
date: Fri, 04 Sep 2020 07:26:48 GMT
status: 400
x-content-type-options: nosniff
x-frame-options: DENY
x-powered-by: ASP.NET
x-rate-limit-limit: 7d
x-rate-limit-remaining: 999965
x-rate-limit-reset: 2020-09-11T07:24:01.3268956Z
x-sourcefiles: =?UTF-8?B?QzpcVXNlcnNcR1gyNjRMSFxTb3VyY2VcUmVwb3NcRU9ZLUVZXEVPWVdlYlxHZW5lcmFsSW50ZXJ2aWV3XFVwbG9hZExvZ28=?=
x-xss-protection: 1;mode=block
:authority: localhost:44357
:method: POST
:path: /GeneralInterview/UploadLogo
:scheme: https
accept: application/json, text/javascript, */*; q=0.01
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
content-length: 58916
content-type: multipart/form-data; boundary=----WebKitFormBoundaryDm8BfGYWiNAUmPUI
cookie: .AspNetCore.Antiforgery.cookiedata; .AspNetCore.Antiforgery.cookiedata
origin: https://localhost:44357
referer: https://localhost:44357/GeneralInterview/Index/16014
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: same-origin
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36
x-requested-with: XMLHttpRequest
logoFiles: (binary)
logoFiles: (binary)
initialPreview: []
initialPreviewConfig: []
initialPreviewThumbTags: []

Form Data files = logoFiles, I have just changed the name since then.

Thanks in advance.

Michael Wang · Accepted Answer · 2020-09-04T07:49:26.830

Test of using bootstrap-fileinput plugin in ASP.NET Core 3.1

View

name="files" must same as the parameter name of controller List<IFormFile> files.

@{
    Layout = null;
}


<div id="logoDiv">
    <input id="fileInput" name="files" type="file" class="file" data-allowed-file-extensions='["png", "jpg", "jpeg", "tiff"]' multiple data-theme="fas">

</div>


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/piexif.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/sortable.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/plugins/purify.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/fileinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/themes/fa/theme.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/locales/(lang).js"></script>

<script>

    $("#fileInput").fileinput({
        showCaption: false,
        showPreview: true,
        dropZoneEnabled: false,
        theme: "fa",
        browseClass: "btn btn-ey-upload btn-ey-utility",
        removeClass: "btn btn-ey-upload btn-ey-utility",
        uploadClass: "btn btn-ey-upload btn-ey-utility",
        showClose: false,
        uploadAsync: false,
        uploadUrl: "/GeneralInterview/UploadLogo",
        //uploadExtraData: { id: 1 }
    });

    // CATCH RESPONSE
    $('#fileInput').on('filebatchuploaderror', function (event, data, previewId, index) {
        var form = data.form, files = data.files, extra = data.extra,
            response = data.response, reader = data.reader;
    });

    $('#fileInput').on('filebatchuploadsuccess', function (event, data, previewId, index) {
        var response = data.response;
        alert(response);
    });

</script>

Controller

Here I use a route attribute to match request URL /GeneralInterview/UploadLogo

    [Route("/GeneralInterview/UploadLogo")]
    [HttpPost]
    public JsonResult UploadFile(List<IFormFile> files)
    {
        List<string> fileNames = new List<string>();

        foreach(IFormFile file in files)
            fileNames.Add(file.FileName);
        return Json(fileNames);
    }

Update 04/09/2020

F12 to check the detail of request

Hi Lightman, Thanks for your quick response. Unfortunately I am still getting a 400-error even after copying your code in place of mine. Is there a chance it could be due to some security filters not liking the way bootstrap-fileinput works? I will paste the response and request headers into the question. — AlexG, Sep 04 '20 at 07:29
Hi, @AlexG, I didn't see the Form Data in your request header, you could check the view of your inputs and `F12` to check error information on broswer. — Michael Wang, Sep 04 '20 at 07:45
@AlexG, that's the all codes added in a new ASP.Net Core 3.1 MVCApplication. That's weird — Michael Wang, Sep 04 '20 at 08:26
I am using ASP.NET Core 2.1 MVC, I don't know if that would make a difference? Calling the same endpoint manually does reach the method (after removing the HttpPost tag as I was using a GET call) — AlexG, Sep 04 '20 at 08:51
Hi, @AlexG, Already push this demo to [github](https://github.com/GotzeWong/UploadImageApp) for u. Please check. — Michael Wang, Sep 07 '20 at 07:21

Error code 400 when uploading files using bootstrap fileinput plugin

1 Answers1

Test of using bootstrap-fileinput plugin in ASP.NET Core 3.1

View

Controller

Update 04/09/2020