Javascript, resize an image and convert to base64

Question

I want to resize image and convert it to base64 before sending via network. It takes so long if it is 10MB or more image so I need first to resize it on front, convert it and then send it to the server

html:

<div class="file__item ui-state-default current_ad current_ad_files">
       <img width="88px" height="88px" src="{{ photo.image.url }}" alt="">
       <input type="hidden" class="photo-base64" id="{{ photo.pk }}"
       value="{{ photo.get_base64_image }}" multiple>
       <a href="" class="file__delete" atr='sorok'></a>
</div>

js:

function convertToBase64(file, inputId) {
        var reader = new FileReader();
        reader.onload = function () {
            let base64String = reader.result.replace("data:", "")
                .replace(/^.+,/, "");
            $(`#${inputId}`).val(base64String)
        }
        reader.readAsDataURL(file);
    }

function getUploadedFileNode(file) {
        let randomId = getRandomID();
        return {
            inputId: randomId,
            node: `
            <div class="file__item ui-state-default file__item--sortable ui-sortable-handle">
                <img width="88px" height="88px" src="${URL.createObjectURL(file)}" alt="">
                <input type="hidden" class="photo-base64" id="${randomId}" value="" multiple>
                <a href="" class="file__delete"></a>
            </div>
            `
        }
    }

let addedFileNode = getUploadedFileNode(lastFile) // lastFile is an regular image from looping over multiupload
convertToBase64(lastFile, addedFileNode.inputId)

PS: front is written in pure javascript and jquery.