So, for some reasons I need to POST base64 encoded image in a input using FORM. Size of the image ~1.1MB, sizes 2500x1700. Base64 encoded size ~1.5MB.
So I have two inputs in the form: input file and input hidden. After downloading an image to input hidden(using FileReader to convert the image to base64), I clear input file value, so, no extra file.
When I trying to submit a form page freezes and memory consumption increases from 50% to 93% (4Gb RAM) and then Chrome crashes.
When I tried to run this page in Firefox(which is always slow and laggy) I've got instant post with no extra memory consumption.
Of course, I'll post this to Chrome issues but now I need to know: is there any tricks to avoid it? Well, maybe I'm not the first who found this bug.
Ok, so, if use input.value = e.target.result in FileReader's onload event, I get memory leak. If I set equal length custom text to input.value, there is no problem. So, I don't think that e.target.result can save reference to FileReader(or it can?), because it's string. So we have native chrome issue on receiving FileReader result.
input.addEventListener("change", function() {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById("input_hidden").value = e.target.result;
};
reader.readAsDataURL(this.files[0]);
});