All geek questions in one place

Chrome memory leak with POST with base64 encoded input - how to solve?

So, for some reason I need a POST base64 encoded image in the input file using FORM. Image size ~ 1.1 MB, dimensions 2500x1700. Base64 ~ 1.5 MB in size.

So, I have two inputs in the form: the input file and the input are hidden. After loading the image to enter hidden (using FileReader to convert the image to base64), I clear the value of the input file, so there will be no additional file.

When I try to submit the form page, it freezes and the memory consumption increases from 50% to 93% (4 GB RAM) and then Chrome crashes.

When I tried to run this page in Firefox (which is always slow and lags), I have instant mail without additional memory.

Of course, I will post this to Chrome issues, but now I need to know: are there any tricks to avoid this? Well, maybe I'm not the first to find this error.

Ok, so if input.value = e.target.result is used in the onloader FileReader event, I get a memory leak. If I set custom text of equal length to input.value, there is no problem. So, I do not think that e.target.result can save a link to FileReader (or can it?), Because it is a string. Therefore, when receiving the result of FileReader, we have a problem with chrome.

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]); });
+5
source share
1 answer

Try using an invisible <textarea> instead of input hidden .

It will look like this:

 <textarea style="display:none" id="XXX"> $("XXX").value = base64

Also make sure to completely remove the input file , save it outside the form tags and remove from the DOM.

Hope this helps

0
source

Source: https://habr.com/ru/post/1242064/

More articles:


All Articles