i'm trying to create a 3d customizer which have a feature to upload an image. Here's what i use currently

function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        var imgObj = new Image();
        imgObj.src = event.target.result;
        imgObj.onload = function () {
            var image = new fabric.Image(imgObj);
            image.set({
                angle: 0,
                padding: 10,
                cornersize: 10,
                height: 110,
                width: 110,
            });
            canvas.centerObject(image);
            canvas.add(image);
            canvas.renderAll();
        }
    }
    reader.readAsDataURL(e.target.files[0]);
}

then i call that function like this

document.getElementById('uploadedImg').addEventListener('change', function (e) {
    handleImage(e);
})

by using that, i wanted to have a lists of images. so i try calling canvas.getObjects() but it doesn't contains images that i uploaded.

this is my canvas.getObjects() when my app first loaded

and this is after i upload 1 image it return the same value, but if i do canvas._objects my image is listed

but when i try to access it using canvas._objects[1] it returns undefined, same thing if i try to do this

canvas._objects.map(x => console.log(x))

it returns only 1 object, which is my svg

why is that? anyone have any idea why?