Javascript - generating and loading huge file locally
I have the following JavaScript code that downloads a file which I can't help but think I got from here: Create a file in memory for user upload, not via server
However, this function crashes from Chrome because I'm trying to download too much data (it might be a couple MB, but it seems to work fine for downloads up to 1 MB. I haven't done a lot of metrics on it).
I really like this feature because it allows me to create a string from an existing huge JavaScript variable and load it right away.
So my two questions are:
A) What causes the crash? Is this the size of the line text
or is there something in this function? I've read that JavaScript can use 60MB strings and I don't think I understand enough.
B) If this is this function, is there another easy way to upload some huge file that allows me to create content locally via JavaScript?
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
source to share
Does it work in other browsers? Try using a debugger and set the breakpoint only inside the function and execute it.
Try to break up element.setAttribute
the data content as well by creating a var that contains the string you are going to set to href, this way you can see more points of failure.
See if the function works encodeURIComponent
with large strings.
Strings are immutable in javascript, for those who are confidential this means that their creation is final, you cannot change the string or add to it, you must create a new one for each change. encodeURIComponent
which url encodes the string is possibly making thousands of changes speeding up the string> 1mb depending on the content of the string. And even if you use null characters that need to be escaped, when you call this function and then add it to a string 'data:text/plain;charset=utf-8,'
, it will create a new string from the two, effectively doubling the memory required for this action.
Depending on how a particular browser passes this function, it is not optimized for long strings at all, since most browsers have a url character limit of ~ 2000 characters (usually 2048), then chances are that the browser implementation will not be escaping at low level. If this function is indeed the culprit, you will have to find another way to uri escape your string. maybe a library or a custom run low.
If the debugger shows that this feature is not a problem, the obvious other bottleneck would be that you add this huge dom reference, the browser might freeze there trying to process this command, and this might require a completely different solution to the loading problem.
While this is just a guess, hopefully this will lead you in the right direction.
source to share
Although I noted that Ricky answered as correct because he gave me the correct answer, the workaround I found for doing this was here:
JavaScript blob filename without reference
The accepted answer at this link was capable of handling over 8MB while the data URI could handle 2MB due to Chrome's URI length limitation.
source to share