Data binding from Javascript returns empty array in C#-CodePudding

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",
    }
}

CodePudding user response：

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

CodePudding user response：

You should post data inside onl oadend 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) {
        })      
}

}