Javascript or jquery upload large file as URI

Question

Im is working on a web application, and one of the functions that they need is the ability to download a fairly large file interactively - this file does not exist on the server and consists solely of data dynamically loaded from the database.

I am currently using the following code (don't run for you, but you can get this idea) in which I add a text box with the file name, then a hidden text area containing all the text needed to load the json style, and then linked to the function which is trying to load the URI.

Dependently, when you run in chrome, I get a page in which the URI is too long and it will not work, etc., but the file still loads.

"The URI presented is too long! The requested URL is longer than the capacity limit for this server. The request could not be processed. If you think this is a server error, contact the webmaster.

In any case, this is annoying: The page allowing these downloads uses the message / receive from the previous page - therefore, the "Back" button is not available because it gives us:

"Confirmation of re-application This web page requires the data that you entered earlier for the correct display. You can send this data again, but you will repeat any action that this page previously performed.

page - I would really like these URI downloads to appear on a new tab, so the back button is not needed, although adding an empty address did not help

Also intereseting - as you can see above, I have a function for "download everything" that works for me, performing actions locally on the xampp server, on google chrome - however, those who create the application report that the button does not work for them (they are on macs using safari, havent had the opportunity to see it for yourself and collect information yet - therefore, although I am not EXPECTING the answer to this with my limited information, I hope someone can have an idea!)

CODE:

< script > function download(filename, text) { var element = document.createElement('a'); element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); // I tried addin this but no new tab appeared! //element.target = "_blank:"; element.setAttribute('download', filename); element.style.display = 'none'; document.body.appendChild(element); element.click(); document.body.removeChild(element); } function download_all() { var nameElements = document.getElementsByName("name"); var valueElements = document.getElementsByName("text"); for (i = 0; i < nameElements.length; i++) { console.log(nameElements[i].value); console.log(valueElements[i].value); download(nameElements[i].value, valueElements[i].value); } } < /script> 

 echo " <form onsubmit=\ "download(this['name'].value, this['text'].value)\" class=\ "form-group\">"; echo "<label for=\ "name\">Download Title</label>"; echo "<input type=\ "text\" name=\ "name\" size=\ "40\" value=\ "" . $m[ 'name'] . ".json" . "\" class=\ "form-inline\">"; //hidden=\"hidden\"> after text echo "<textarea name=\ "text\" hidden=\ "hidden\">" . $json_meal_data . "</textarea>"; echo "<input type=\ "submit\" value=\ "Download\" class=\ "btn-primary\">"; echo "</form>"; echo "<br>"; echo "<br>"; 

It is also definitely worth noting that I have included the “Download All” function in the above snippets. It's strange that launching everything downloaded in Chrome downloads all the files, but running it in Safari only downloads 1 file.

Answer 1

You have passed a too long URL in XAMPP . XAMPP stands for Apache. In Apache, the maximum URL length is about 4000 characters, after which Apache generates the "413 Entity Too Large" error.

I agree with @PatrickEvans that it is better to use URL.createObjectURL . URL.createObjectURL() can be used to build and parse URLs. URL.createObjectURL() in particular, can be used to create a link to a file or block. Unlike base64 encoded URLs, it does not contain the actual data of the object - instead, it contains a link.

The good thing is that it is really fast. Previously, we had to create an instance of FileReader and read the entire file as a base64 URL, which takes time and a lot of memory. Using createObjectURL() result is immediately available, which allows us to do things such as reading image data on the canvas.

As you can see in the next demo. Two links are the same. But if you check the Without createObjectURL link href attribute, and the attribute is too large to edit , but in the With createObjectURL line you can edit it, because I used URL.createObjectURL() to create it.

Online Demo (jsFiddle)

Answer 2

You do not need to attach an element to the document. And avoid using base64 because it is 37% more than Blob .

 function download(filename, text) { var element = document.createElement('a'); var blob = new Blob([text], {type: "octet/stream"}) var url = URL.createObjectURL(blob); element.setAttribute('href', url); element.setAttribute('download', filename); element.click(); } 

Answer 3

It is likely that what happens is that you are actually populating the browser URL and sending the GET request to the server.

GET requests limit the amount of data that they can send to the server, so the URI is too long. (POST, by contrast, can significantly increase the payload and is limited only by your server settings)

Further information on browser anchor length restrictions can be found here:

What is the maximum length of a URL in different browsers?

https://weblogs.asp.net/mschwarz/post-vs-get