Develop Reference

Send file as a response from ajax request

I have a javascript function that sends the name of the audio file on my server to a php script using jquery get. It looks like this:
function getAudioClip() {
var x = document.getElementById("clips").value;
$.get( "get_audio.php", { filename: x } )
.done(function( data ) {
loadAudioClip(data);
});
}
The function loadAudioClip(data) displays the waveform of the audio file given as data. I want to make get_audio.php return the audio file with the file name x, so I can use it to display the waveform using my loadAudioClip(data) function.
Edit: I figured out that maybe I can get a file directly instead of using php, like this
function getAudioClip() {
var x = document.getElementById("clips").value;
$.get( "audio/" + x , function( data ) {
loadAudioClip(data);
});
}
Is that possible? x is a filename(ex. MyRecording02.wav).

Opening an audio file with PHP will be slow process. Maybe you can check the existence of the file with PHP, and then if file exists, simply do something like this:
header("Location: $filename");

How to download a file through a custom POST request with CasperJS

I am writing a crawler and needs to download file generated after a form request using POST.
I have successfully used this.download(url,'POST',Params) for regular forms.
One of the sites has many fields using the same name, thus preventing me from using the regular download method.
After trying a lot of things, I tried with $.ajax() and __utils.sendAJAX() to process the form like this:
response = this.evaluate(function(){
url=...
params = $('form#theirForm').serialize();
data = __utils__.sendAJAX(url, 'POST', params,false,{contentType:"application/x-www-form-urlencoded"});
return __utils__.encode(data);
});
function decode_base64(s) { var e={},i,k,v=[],r='',w=String.fromCharCode; var n=[[65,91],[97,123],[48,58],[43,44],[47,48]]; for(z in n){for(i=n[z][0];i<n[z][1];i++){v.push(w(i));}} for(i=0;i<64;i++){e[v[i]]=i;} for(i=0;i<s.length;i+=72){ var b=0,c,x,l=0,o=s.substring(i,i+72); for(x=0;x<o.length;x++){ c=e[o.charAt(x)];b=(b<<6)+c;l+=6; while(l>=8){r+=w((b>>>(l-=8))%256);} } } return r; }
casper.then(function() {
utils.dump(response);
fs.write("test.zip",decode_base64(response),'w');
});
The codes returns me base64 data which I convert and store in a test.zip file.
But I juste can't uncompress it, says it is corrupted.
I dump the data of a correct zip file =>
PK^C^D^T^#^H^#^H^#<F4><89><96>F^#^#^#^#^#^#^#^#^#^#^#^#?^#^#^#fourniture denr<E9>es alimentaires - dietetique infantile\CCAP.pdf<AC><BC>^ET\K<D3><F7>;^D<B7><U+0B81>^#<C1><99>^Y^F'^D<B7><E0>^D^ON<90><E0><EE><EE><EE>^Dwww'^P<9C>^D^H<EE>^^܂<C3>%'<CF>9<E7><C9><F7><U+07B5><BE>7<F7>f^SVOzf
Compared it with the first line of my file :
PK^C^D^T^#^H^#^H^#)_^M^#^#^#^#^#^#^#^#^#^#^#^#^#b^#^#^#fourniture denr<FD>es alimentaires - dietetique infantile\Bordereau de prix dietetique infantile.xlsx<FD>zuT<FD>I<FD><FD><FD><FD>^^4hp^M^D^M^R^H<FD>.<FD><FD>}p<FD>3<FD>kpw<FD>#pw^M<FD><FD>^R4<FD>Gv<FD>~<FD>[<FD><FD><FD><FD><FD>
Anyone has an idea of what could have gone wrong?
I have tried so many things (encoding tools, encoding settings, dumping from the chrome console to get pure base64, etc.)
I don't understand why it is related to latin-1 or utf8 encoding, since a website asks me to select which encoding to use. Tried both.

casper.download() happily accepts a serialized form instead of an object, so you can still use it. You just have to serialize the form in the page context beforehand:
var formData = casper.evaluate(function(){
return $('form#theirForm').serialize();
});
var url;
casper.download(url, targetFile, 'POST', params);
The only problem might be, that another mimeType is used: "text/plain; charset=x-user-defined".
In that case, you will have to recreate the whole cascade of functions that go into casper.download():
var url;
var response = casper.evaluate(function(url){
var params = $('form#theirForm').serialize();
var data = __utils__.sendAJAX(url, 'POST', params, false);
return __utils__.encode(data);
}, url);
var cu = require('clientutils');
fs.write("test.zip", cu.decode(response), 'wb');
"application/x-www-form-urlencoded" is used by default for __utils__.sendAJAX().

how to export csv file with filename

I want to export the exist data into csv file. I try to use this code:
var uriContent = "data:text/csv;charset=utf-8," + encodeURIComponent(data);
var myWindow = window.open(uriContent);
myWindow.focus();
it works but I can design filename. I can only get the dialog with name like "MVeAnkW8.csv.part" which I don't know where the name come from.
How can I assign filename in the first dialog? Thanks in advance.
update:
I am now using rails. Actually I have a method in server side names export_to_csv. In end of this method, I use code like that:
send_data(csv_string,
:type => 'text/csv; charset=utf-8;',
:filename => "myfile.csv")
It works and I can specify the file name.
For now, I want to use ajax to get more csv files(that is the reason why I want to use javascript, because a normal http request can only get one file to be downloaded).
I use js code like that:
$.post("export_to_csv",
function(data) {
var uriContent = "data:text/csv;charset=utf-8," + encodeURIComponent(data);
var myWindow = window.open(uriContent);
myWindow.focus();});
It get the data from server side and I try to transfer it into csv. I can get a file but can't specify the file name.

As I know, you can specify the filename only in chrome 14+.
Take a look at this question: Is there any way to specify a suggested filename when using data: URI?
Update!
If you want to download multiple csv files "at once", you can zip them together, or save each file on the server separately (each file now has a url that points to it - if you place them inside the 'www' folder).
Then send the file names and their path/url to the client via ajax (use a json encoded list for example).
In the ajax callback function: take the list of the files and open each file-url in a separate popup.

write a javascript var="some text" into a pre loaded but empty txt document

I'm creating a dynamic playlist for a music player I've put together. The playlist is going to sit in an external .txt document. I'll use an example. I have a variable:
playlist="track_1"
on the page is a button
<button onclick="add_track()">
in the script in the head
function add_track()
{
playlist=playlist+" track_2"
...What I need here is some way to put the playlist variable into a txt doc
}
The buttons will be generated by php to include the name of the track to add to the playlist variable string. Document.write is perfect for this function as it replaces everything with the content of the variable; unfortunately it replaces the document the button is in not an specified external file.

Well you could create a JSON object in a file and save it as file1.json
{ "playlist" : "track1" }
and the use
$.getJSON("file1.json", function(data){
var playlist=data.playlist+" track_2"
});
of course this works only when you read it, to write to the .json file you should use PHP or whatever you use server side

You cannot write anything on a file with javascript. You'll need a server side solution.
Eg: You could have an ajax call to a php script that writes something in a txt file

You need to use PHP to write/append into files. You can use jQuery.ajax() function to call a PHP script to write/append into file:
jQuery('#buttonId').live('click',function(event) {
$.ajax({
url: 'write-file.php',
type: 'POST',
dataType: 'json',
data: {
playlist: "track_1"
},
success: function( data ) {
for(var id in data) {
alert( data[id] );
}
}
});
return false;
});
write-file.php (something like this)
$myFile = "testFile.txt";
$fh = fopen($myFile, 'a');
fwrite($fh, $_POST['playlist']);
fclose($fh);
// echo status here in json format

If you want write the playlist on the client side you can use the html5 filesystem api.
http://www.html5rocks.com/en/tutorials/file/filesystem/

Depending on what you actually want to do, you could open a new browser window with a data URI, containing your text:
window.open('data:,' + encodeURIComponent(playlist));
The user only has to save the document then. The size of playlist ist limited by the allowed URI length though.
Here is an example: http://jsfiddle.net/UjzsG/

Thanks for all the help, first time I've asked a stupid question and got a really good answer. Turns out I'm a bit thick, don't need the PHP now but I will later when I want to save a playlist. Realised to make a dynamic playlist I can keep the array it lives in as a string in a variable, add tracks to the string then call eval(playlist) in each function that reads the list.
var playlist = 'var tracks = new Array("track_00","track_01"';
var end_bit = ');';
var playlist_full = playlist+end_bit;
Then to add stuff
function AddTrack()
{
playlist=playlist+'"track_02"';
}
And to read it
function ReadTrack()
{
playlist_full = playlist+end_bit;
eval(playlist_full)
document.getElementById("current_track").innerHTML=tracks[2];
}
Again cheers for all the advice.

Generating file with ajax and allow user to download it?

I have very similar problem as this: Allowing users to download files - ASP.NET , but in my case I am generating xlsx file with ajax, and on ajax-called aspx page I am using:
Response.Clear();
Response.ContentType = "application/octet-stream";
string filename = User.Identity.Name + "_Report.xlsx";
Response.AddHeader("Content-Disposition", "attachment; filename=\"" + filename + "\"");
Response.WriteFile(AppDomain.CurrentDomain.BaseDirectory + "Reports\\" + filename);
Response.End();
When this file is generated, control is returned to ajax calling page and from there I wan't to show save file dialog based on this ajax response and allow user to download this generated file. I don't want to save file on disk with ajax called page and then redirect ajax calling page to that file, because of popup blocker in IE. I am using jquery for ajax calls:
$.ajax({
type:"POST",
url: "AjaxReport.aspx",
data:dataString,
success: function(data) {
//don't want to use this
// $('#RedirectIFrame').attr('src','Reports/Report.xlsx?cache='+Math.random());
//want to use data variable containing ajax response (bytes of Report file) showing
//save dialog to download this file from browser
}
});
How to do this?

Currently JavaScript can't access to the user's file system, meaning you can't prompt users to save a file coming from a network stream.
In other words. You'll need to do that redirect and write your file stream to the HTTP response and let the user decide what to do :)