POST-request with multipart/form-data from ExtJS form to .Net5 controller gets responseText empty

Question

I have a form in ExtJS:

{
        xtype: 'form',
        items: [{        
            xtype: 'filefield',
            name: 'azezFile'  
        }],
        buttons: [{
            text: 'Load',
            handler: function() {
                var form = this.up('form').getForm();      
                if(form.isValid()) { 
                    form.submit({
                        url: uploadApiPath,   
                        success: function(fp, o) {
                           // Never goes here
}
});
...

It sends file to a controller (.Net5):

namespace KROSS_Core.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    [Produces("application/json")]
    public class UploadController : ControllerBase
    {                    
        // POST: api/Upload
        [HttpPost]
        public IActionResult Post([FromForm] IFormFile file)
        {
            //AzezUploadFile(this.HttpContext);
            return Ok(new { success = true });
            //return Ok(LoadFileToBase(this.HttpContext));
            //return BadRequest(new { success = false, message = "Wrong answer" });
        }

Controller getting request and responses normally, but I got an exception in ext-all-debug.js:

Unhandled exception at line 6092, column 17 in https : // localhost:44364/Website/Scripts/ext.js/ext-all-debug.js 0x800a139e - Error JavaScript: Ext.JSON.decode(): You're trying to decode an invalid JSON String:

And response.responseText is empty in debugger. After I close that exception, the browser (IE11) asks me to save or open that json file. Firefox shows another error in console:

"You're trying to decode an invalid JSON String: <pre>{\"success\":true}</pre>"

, but it was set [Produces("application/json")] in controller...

Google Chrome log: "You're trying to decode an invalid JSON String: <pre style="word-wrap: break-word; white-space: pre-wrap;">{"success":true}</pre>"

What is the problem and how to make it working? The same controller method loaded without sending multipart form-data goes normally and ExtJS works with response JSON.

have you tried using type Object and plain return instead using IActionResult and Ok ? — Fabio Barros
{\" <-- Your JSON is not correct, have escape symbols (backslasch) in your JSON. — Arthur Rubens
@FabioBarros I tried it first of all and now tried again, but the result is the same - empty reponseText — G. Goncharov
@ArthurRubens as you can see, I don't serialize it by myself, .Net5 does it, so it makes really correct JSON, I always get correct JSON result doing the same request but without sending file in form-data — G. Goncharov
it appears to be escaping double quotes in the response when the object is passed to json, maybe you could try to change the response to string and return plain text "{ 'success' = false}" — Fabio Barros

G. Goncharov G. Goncharov · Accepted Answer · 2021-01-20T11:41:51

I have no idea how to fix it in ExtJS, but I used another method of uploading a file to a server (same controller), and it works perfect:

function uploadFile(file, url, success, failure) {
    var formData = new FormData();
    var request = new XMLHttpRequest();

    formData.append('file', file);

    request.onload = function (response) {
        var jsonResult = JSON.parse(response.target.responseText);

        if (jsonResult.exception || jsonResult.error) {
            failure(jsonResult);
        }
        else {
            success(jsonResult);
        }
    };

    request.open("POST", url);
    request.send(formData);
}

And use it like

uploadFile(form.down('[name=fileInnputName]').extractFileInput().files[0], uploadApiPath, function() { }, function() { });

POST-request with multipart/form-data from ExtJS form to .Net5 controller gets responseText empty

1 Answers