Data binding from Javascript returns empty array in C#

Question

In console.log I can see the array is not empty,as well it's shown on the image below. However, when I send the data to the endpoint the array is 0. I notice the other element MaterialId has value, so must be some problem with the array only. The data is sent through axios.

Any help is appreciated.

C# Model data:

public class axiosChangeMaterialPictureModel
{
    public Array[] Image { get; set; }

    public int MaterialId { get; set; }
}

C# Endpoint:

    [HttpPost]
    public IActionResult ChangeMaterialPicture([FromBody] axiosChangeMaterialPictureModel data)
    {
        string defaultPath = _webHostEnvironment.WebRootPath;

        string oldPicture = _warehouseService.ChangeMaterialPicture(data.Image, data.MaterialId, defaultPath);

        if (!string.IsNullOrEmpty(oldPicture))
        {
            // Delete the old image
            _convertService.DeleteMaterialFile(oldPicture);

            return Ok();
        }
        else
        {
            return BadRequest();
        }
    }

Javascript:

let arrBinaryFile = [];
            let file = document.getElementById(`file-${materialId}`).files[0];
            let reader = new FileReader();

            // Array
            reader.readAsArrayBuffer(file);
            reader.onloadend = function (evt) {

                if (evt.target.readyState == FileReader.DONE) {
                    var arrayBuffer = evt.target.result,
                        array = new Uint8Array(arrayBuffer);
                    for (var i = 0; i < array.length; i++) {
                        arrBinaryFile.push(array[i]);
                    }
                }
            }
                console.log(arrBinaryFile);
                let baseUrl = `${baseSharedUrl}/Warehouse/ChangeMaterialPicture`;
    
                var data = {
                    Image : arrBinaryFile,
                    MaterialId: materialId
    
                }
                axios.post(baseUrl, data)
                    .then(function (response) {
                    })
                    .catch(function (error) {
                    })

Javascript Array Image: ImageFromTheArray

UPDATE: After some research, to send array data I had to add the header with octet-stream. I'm getting 415 Unsupported Media Type, however, in the request I can see the data-with the array. Now the problem is how can I solve this 415?

let config = {
    headers: {
        "Content-Type": "application/octet-stream",
    }
}

Michał Zych · Accepted Answer · 2022-11-24 11:50:08Z

1

public Array[] Image { get; set; } looks suspicious. Have you tried with byte[]? public byte[] Image { get; set; }

answered Nov 24, 2022 at 11:50

Michał Zych

1591 silver badge8 bronze badges

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

1 Comment

Maria Over a year ago

Yes, with byte[] Image {get;set;} - data is null in the endpoint. :\

Michał Zych · Accepted Answer · 2022-11-24 12:49:42Z

0

You should post data inside onloadend callback:

reader.onloadend = function (evt) {
if (evt.target.readyState == FileReader.DONE) {
    var arrayBuffer = evt.target.result,
        array = new Uint8Array(arrayBuffer);
    for (var i = 0; i < array.length; i++) {
        arrBinaryFile.push(array[i]);
    }
    
    //post data when arrBinaryFile is ready
    console.log(arrBinaryFile);
    let baseUrl = `${baseSharedUrl}/Warehouse/ChangeMaterialPicture`;
    
    var data = {
        Image : arrBinaryFile,
        MaterialId: materialId      
    }
    axios.post(baseUrl, data)
        .then(function (response) {
        })
        .catch(function (error) {
        })      
}

}

answered Nov 24, 2022 at 12:49

Michał Zych

1591 silver badge8 bronze badges

3 Comments

Maria Over a year ago

I add one header, in the request I can see the array data. But I'm getting 415 error now :\

Michał Zych Over a year ago

Try NewtonSoft as a c# serializer...

Maria Over a year ago

Finally, its working now: let config = { headers: { "Content-Type": "application/json", "Accept": "application/octet-stream" } }

Collectives™ on Stack Overflow

Data binding from Javascript returns empty array in C#

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest