I need a way to 'force' the download of a file when the AJAX response of a Post is returned.
I can't use window.open() because I don't have an useful URL.
Is there any way using Javascript or Dojo toolkit to force the download of the file inside of the HTTP Response?
Your server needs to add the Content-Type and Content-Disposition headers to force a download.
Content-Type: application/octet-stream
Content-Disposition: attachment; filename=filename.ext
Related
I would like to change the file name of a downloaded file from Submit that uses
Content-Disposition: attachment; filename=Reports.csv
I would like to Download that file with a preset file name
Content-Disposition: attachment; filename=AnyFileName.csv
I would need it to be userscript friendly
The Download is Post and the content it returns is
Content-Type: application/octet-stream; charset=UTF-8
I need it to change the filename of the download file
That's not gonna be easy at all. To do this you will have to:
send the form properly using either XMLHttpRequest or fetch API
After sending, retrieve the file data as Blob. You need to use responseType to request Blob
Use URL.createObjectURL to create downloadable data URL
Create link to allow download:
Download
Dispatch a click on that link
Wait a bit (few ms) and then free the memory using URL.revokeObjectURL
I'm sory, it's probably much more work than you expected. Good luck. You may alternatively consider some add-on or program that tampers with the HTML headers for that particular site.
It would be much easier if you could use the download attribute on <form>, but that's not possible.
Is it possible to create a download link for a remote file in plain HTML, or with JavaScript or jQuery?
The download attribute doesn't seem to work for remote files in Chrome 73 or Firefox 66.
<a href="//amazon.com/ads.txt" download>ads.txt</a>
No, the file URL must be on the same domain as the containing document, unless it's a blob: or data: URL:
This attribute only works for same-origin URLs.
Although HTTP(s) URLs need to be in the same-origin, blob: URLs and data: URLs are allowed so that content generated by JavaScript, such as pictures created in an image-editor Web app, can be downloaded.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes
As far as I know it's not possible. I would recommend using some sort of proxy-script on your server to overcome the cross-domains issues, like a simple PHP script. You can check referrer, add custom headers for content disposition etc
You can't do this client side.
The server hosting the resource you want to download can provide a Content-Disposition response header which will trigger a download.
Content-Disposition: attachment; filename=ads.txt;
How can I download an XML file when I call a REST endpoint (which responds in XML format) with AngularJS?
So the flow is simple, I have created a button on the UI which makes a call to a REST endpoint (which has a response in an application/xml format) and its response should come as a download on the UI.
If I understand the question correctly (use the browser's download functionality when the user clicks the link), then this is not a question about angular really.
In order to cause a file to download you need to do two things:
Attempt to navigate the browser to the URL that returns the XML (i.e. don't make an AJAX request for it).
e.g. <a href="http://myserver.com/my/REST/endpoint>Click here</a>
Ensure the XML content is being served with headers that would force a download. If you don't do this, the browser may attempt to render the XML itself rather than downloading it. You could try either setting the Content-Type header to be applicaton/octet-stream or look into using the Content-Disposition header:
Content-Disposition: attachment; filename=someFileName.xml;
When I upload a file the normal way without Ajax, the page reloads, and the POST request payload looks like this when I look at it in the network tab of the Chrome element inspector:
------WebKitFormBoundaryXseUYiNOVZKdYrTk
Content-Disposition: form-data; name="fdata[]"; filename="baby_bot.jpg"
Content-Type: image/jpeg
------WebKitFormBoundaryXseUYiNOVZKdYrTk
Content-Disposition: form-data; name="fdata[]"; filename="dyno_bones.png"
Content-Type: image/png
------WebKitFormBoundaryXseUYiNOVZKdYrTk--
But when I try to create the POST request manually and send the file with ajax by using the FileReader object to read the content of a file in binary format and sending the binary data via the manually created POST request, the payload looks like this in the inspector:
------CustomFormBoundaryXseUYiNOVZKdYrTk
Content-Disposition: form-data; name="fdata[]"; filename="baby_bot.jpg"
Content-Type: image/jpeg
a2q#¡B±Áð$RÑá3ñ%br4C&Scs¢ÂâÿÄ
------CustomFormBoundaryXseUYiNOVZKdYrTk
Content-Disposition: form-data; name="fdata[]"; filename="dyno_bones.png"
Content-Type: image/png
a2q#¡B±Áð$RÑá3ñ%br4C&Scs¢ÂâÿÄ
------CustomFormBoundaryXseUYiNOVZKdYrTk--
Notice that you can see the binary data (represented by those random accented characters) when in the body of the POST request. How can I make my manually created POST request be perfectly identical to that of the browser so that the I get identical results from my PHP handler script? The idea here is that I can emulate the POST requests that the browser sends and not have to modify anything in the PHP backend.
Instead of trying to emulate the POST request data, use the FormData object. Its easy to use and lets you send form data via ajax easily. A FormData object automatically creates and send the appropriate POST request with the help of an XMLHttpRequest object.
The Mozilla documentation includes a nice article on how to use the XMLHttpRequest object which itself includes a nice example on how to use the FormData object.
Is there a way to 'force' the browser to download a file instead of opening that?
Download this file
I've tried the method via js using the window.open("file.txt", "Download");
but no success.
Thx.
Updating:
I've done a php file as follow;
<html>
<a href='dl.php?bid=3'>
<php>
$sql="select barquivo from bibilioteca where bid=$_GET[bid]";
$row=mysql_fetch_assoc(mysql_query($sql));
header("Content-Disposition: attachment;filename=biblioteca/$row[barquivo]");
And it download a file "biblioteca_" with 0 bytes.
You should do this server-side.
If you send a
Content-type: application/octet
or
Content-disposition: attachment; filename=file.txt
header then the user will be prompted to download.
Not at the javascript level. You can have a good deal of control on what the user agent (browser) will attempt to do, by changing the the Mime Type of the content served - that can be done from the web server or server side application.
That means, your ".txt" file is sent to the browser with a
Content-Type: text/plain
http header.
If instead it is served with:
Content-Type: application/octect-stream
http header instead, most likely the user will be prompted to save the file
(regardless of the file name or extension)
Can't be done in pure Javascript as far as I know. You have to send the appropriate headers server side.
If you can use Apache´s .htaccess settings (much easier) or PHP (more complicated because you'd have to parse txt files through PHP, or introduce a PHP script to pass through the files), you can refer to the accepted answer given here.
It's up to the server to send the appropriate header.
Content-Disposition: attachment;filename=schmoo.mp3
For those looking to d/l files trhough a link heres the best solution
PHP: Force file download and IE, yet again
by cballou