javascript - Get base64 string of an image and store to hidden element

Question

I need to send a base64 encoded string of images uploaded by a user to some URL for processing.

Due to some reason (my old API), I need that string in a paragraph element and use its content in a Java class to attach string in response(which you can ignore, I have to do it).

HTML:

<input type="file" name="attachment" id="attachment" accept="image/*"
    onchange='onChooseFile(event, onFileLoad.bind(this, "imageData"))'>

<p id="imageData"></p>

Javascript:

function onFileLoad(elementId, event) {
    document.getElementById(elementId).value = event.target.result;
}

function onChooseFile(event, onLoadFileHandler) {
    if (typeof window.FileReader !== 'function')
        throw ("The file API isn't supported on this browser.");
    let input = event.target;
    if (!input)
        throw ("The browser does not properly implement the event object");
    if (!input.files)
        throw ("This browser does not support the `files` property of the file input.");
    if (!input.files[0])
        return undefined;
    let file = input.files[0];
    let fr = new FileReader();
    fr.onload = onLoadFileHandler;
    fr.readAsText(file);
}

The data going on the server is causing the image to be somehow corrupted(getting an error on opening and server code is fine because it's working with other sources of base64 encoded images). Can you please point out how to do it, I'm not a front-end developer, please forgive me for my naive mistakes.

Answer 1

I used below code instead on those two javascript methods

function onChooseFile(element) {
        let file = element.files[0];
        let reader = new FileReader();
        reader.onloadend = function() {
            document.getElementById("imageData").value = reader.result;
        }
        reader.readAsDataURL(file);
    }

worked like a charm