Download generated file with jQuery POST - javascript

I need to download file from javascript. I send json with $.post, Rails server generates xls file and sends it back with send_data. Response has nex headers:
Content-Disposition:attachment; filename="preflist.xls"
Content-Transfer-Encoding:binary
Content-Type:application/ms-excel
How can I download this file after post request?

As I understand it you need to trigger normal browser file download after posting data to the server.
There are two ways of doing this:
After success of post you redirect your browser to an URL where the posted file is located
If the only source of the file is on the response of the post you will have to use the FileReader API, though that is not supported by all browsers. You combine reading the file from the result of the post with readAsDataURL(). The result of this is something you can combine with a hyperlink and the download attribute:
Then use javascript or jQuery to click that hyperlink.
http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api
Hope this helps!

Related

Download file from url and then upload to another site via js

I have a requirement to download a file from a url, then POST it to another site via single js call.
Use case:
User enter a file URL then click Re-Upload button
Conditions:
The file will be either audio/wav, audio/mp3, or a zip file with multiple wav and mp3
I need to POST using multipart/form-data
Questions:
How do I create multipart/form-data request via js manually?
Correct me if I am wrong, but I think I need to store the file content into an input field once I download it.
How to encode this file content into a string that will comes up as byte[] when uploaded?

Downloading File After Renaming Using HTML Or JavaScript

I want to download file from external server but after renaming it. Let's say http://playtictactoe.atwebpages.com/logo.png is an image file I want to download. I have used the following HTML:
<a href="http://playtictactoe.atwebpages.com/logo.png" download="myName.png">
Download File
</a>
But this doesn't rename the file. I've read somewhere that this is because of Response Header on server. Is there any way to ignore Response Header on client side? Else guide me any other solution.
You can download the file as a buffer and resave with the file api like descriped here:
HTML5 File API downloading file from server and saving it in sandbox
Or lookup FileAPI and XMLRequest to Buffer. You download the file as binaryBuffer save it with fileAPI and rename it. This should also work in Firefox. But this is not the simple solution you are searching for. Even though it works ;-)
You can then rename the file like you want.
Cheers

Get XHR sent formdata's output as a downloadable file

I'm doing a small HTML project of converting a doc file into another file (which is based on user preference). The website will have the user pickup the file, and choose their preferences on how the file should be processed, before sending it to a Java servlet. After processing the file, the servlet will then send the processed file as a downloadable file, which then will be automatically downloaded to the user's browser download folder.
At first, i used the HTML's form tag, with various input on it. After submitting the form, the processed file was auto-downloaded to my browser's download folder.
But then i changed the pickup file method into drag and drop, and used XMLHttpRequest to send the formdata, along with the dropped file to the servlet. The formdata was successfully sent to the servlet, and the servlet processed the file normally. But after that, the servlet didn't send the processed file to my browser as a downloadable file. I checked on the inspector, on the response under network tab, and it showed the processed file content, yet i didn't get the processed file like i would normally get using form tag method.
So i was wondering did i do something wrong in my XHR code below? I just want to get the processed file from the servlet as downloadable file, and not showing it on my page. The HTML form tag works fine and the servlet returned the processed file as auto-download file, but with XHR, the processed file was only shown in the response tab under network in the inspector, no downloadable file or whatsoever.
function formHandler(form) {
var formdata = new FormData(form);
formdata.append("inputFile", doc);
var xhr = new XMLHttpRequest();
xhr.open('POST', "excelServlet", true);
xhr.send(formdata);
}
Ok i get the answer for this already.
AJAX cannot download the response from server directly like form's submit() method. =.=''' The response will be shown in the inspector's response, but user won't be able to download it.

Saving AJAX stream to a PDF file

I'm trying to save the result of a XMLHTTPRequest to a PDF file.
I am communicating with a server I am calling to get a chunk of data formatted as PDF data.
I'm using XMLHTTPRequets to log into the server, then make a search request which in return creates a PDF which is streamed back to me though the XMLHTTPRequest.
I need to save that result as a PDF so I can later open it in Acrobat.
When I save the response text to a file the result is not a valid PDF. The request is doing something to the stream which makes it invalid as a PDF.
I have no control over that server so I cant make it send back a link to a temporary valid PDF file.
Is there a way around that ?
Is there a way to encode that stream into a valid PDF file ?
I am using Javascript for that application.
Thanks
Erez
what you could do is return from your http server an xml file like the following:
<resp><![CDATA[YOURPDFSTREAM]]></resp>
and them retrieve the RESP node to build your pdf file.
Don't forget to encode your stream in the desired encoding format as well.

How to upload a file using an HTTP "PUT" using JQuery?

I would like to upload a file using JQuery-File-Upload, but using HTTP "PUT" instead of multipart-forms. According to their site:
- Multipart and file contents stream uploads:
Files can be uploaded as standard "multipart/form-data" or file contents stream (HTTP PUT file upload).
but I cannot find anywhere in their documentation as to how to do this. Can anyone help?
According to : https://github.com/blueimp/jQuery-File-Upload/wiki/Options
method
The method of the HTTP request used to
send the file(s) to the server. Can be
POST (multipart/formdata file upload)
or PUT (streaming file upload).
Accepts a String or a function
returning a String.
You should use :
$('#file_upload').fileUpload({
namespace: 'file_upload_1',
url: '/path/to/upload/handler.json',
method: 'PUT'
});
I love REST too but you might want to make sure you unit test well on the browsers you need to support.
http://api.jquery.com/jQuery.ajax/
The type of request to make ("POST" or "GET"), default is "GET". Note: Other HTTP request methods, such as PUT and DELETE, can also be used here, but they may not supported by older browsers.
See this answer
How do I PUT data to Rails using JQuery

Categories

Resources