Úprava obrázků před hromadným nahráním na server pomocí JS

Zdravím a omlouvám se, není to úplně k Nette, ale potřeboval bych poradit s úpravou JS skriptu, který změní velikost obrázku. Potřebuji nahradit původní obrázky ve formuláři a teprve poté nahrát na server přes save() v presenteru.

form

<form  n:name="albumForm">
<input n:name="fotky" type="file" id="formFiles">
...
</form>

Javascript

<script>

document.getElementById("formFiles").addEventListener("change", function (event) {
    const maxWidth = 500;
    const maxHeight = 300;

    var files = event.target.files; // FileList object

    for (var i = 0, f; f = files[i]; i++) {

        //var fileName = event.target.files[i].name;
        //console.log(fileName);

        var reader = new FileReader();
        reader.onload = function (e) {

            var img = new Image();
            img.onload = function () {
                var cnvs = document.createElement('canvas');
                var rectRatio = img.width / img.height;
                var boundsRatio = maxWidth / maxHeight;
                var w, h;
                if (rectRatio > boundsRatio) {
                    w = maxWidth;
                    h = img.height * (maxWidth / img.width);
                } else {
                    w = img.width * (maxHeight / img.height);
                    h = maxHeight;
                }
                cnvs.width = w;
                cnvs.height = h;
                var ctx = cnvs.getContext('2d');
                ctx.drawImage(img, 0, 0, w, h);


                //MOHU SOUBORY ZOBRAZIT

                //var uri = cnvs.toDataURL();
                //document.body.innerHTML = '<img src="' + uri + '">';


               //ALE POTREBUJI JE DO DOSTAT ZPET DO FORMULARE

            };
            img.src = e.target.result;

        };
        reader.readAsDataURL(this.files[i]);

    }
});
</script>

Neporadil by někdo?