upload base64 encoded image as strings using text box

I am using cropperjs and my backend is a flask application. I need to upload cropped image to the server. The examples I have seen used ajax and toBlob to upload the cropped image. However, I need to upload both the original image and the cropped image, so I figured there might be a simpler way to do this. In html I added an hidden input text box:

<input accept="image/*" id="photo_input" name="photo" style="display:none" type="file">
<input id="cropped_image_input" name="cropped_image" style="display:none" type="text" value="">
<button type="submit" id="upload_photo">upload</button>

And add some javascript to get the base64 encoded string of the cropped image from canvas, then use that string as the input of the above input text box:

document.getElementById("upload_photo").onclick = function() {
        var img = document.getElementById("image");
        var cropper = img.cropper;
        var croppedBase64 = cropper.getCroppedCanvas().toDataURL();
        var croppedInput = document.getElementById("cropped_image_input");
        croppedInput.value = croppedBase64;
        };

Then I can get the base64 string in flask from a wtform field.

As I am not familiar with javascript and handling file upload from front end. I have two questions:

  1. does this guarantee i can get the base64 string? would it be possible that the form data is uploaded first and then the onClick function is executed later?
  2. is this a good practice, in terms of efficiency and security?

thanks!