I’m working on a small project with different input files .
For each change event of each input file that is triggered after the user chooses an image, the canvas resizes that image to what is programmed.
So far everything is ok.

Now, I need to set these new settings for this same e.target

form action=”./teste.php” method=”post” name=”cad” id=”cad” enctype=”multipart/form-data”

input type=”file” name=”teste1[]”

input type=”file” name=”teste1[]”

input type=”file” name=”teste2[]”

input type=”file” name=”teste2[]”

input type=”file” name=”teste3[]”

input type=”file” name=”teste3[]”

buttonTesting/button

/form

script type=”text/javascript”

let form = document.querySelector(“#cad”);

form.addEventListener("change", (e)=>{

    e.preventDefault();

    var file  = e.target.files[0];

    var resize_width = 200;
    var resize_height = 200;

    const reader = new FileReader();

    reader.readAsDataURL(file);
    reader.name = file.name;
    reader.size = file.size; 


    reader.onload = function (event)
    {
        var img = new Image();
        img.src = event.target.result;

        
        img.onload = function (el)
        
        {
        
            var elem = document.createElement('canvas');

            elem.width = resize_width;
            elem.height = resize_height;

            var ctx = elem.getContext('2d');
            ctx.drawImage(el.target, 0, 0, elem.width, elem.height);

            //I tried it        
            event.target.result = ctx.canvas.toDataURL('image/jpeg', 0.5);

            console.log(event.target.result);


            //And so too
            //const dataTransfer = new DataTransfer();
            //dataTransfer.items.add(ctx.canvas.toDataURL('image/jpeg', 0.5));
            //event.target.result = dataTransfer.files;

        }
    }

});

/script