Request user to save file via AJAX call

Question

I export my DHTMLX grid to csv and was able to successfully create the .CSV file. The problem I am facing is that it is not asking the user to save / open the file. I am using the $ .post call from javascript to send a CSV string to PHP and then write this string to csv. For some reason, it does not create an invitation for the user, but it successfully writes the file and saves it on the server. Below is the corresponding code:

JS:

myGrid.csvParser = myGrid.csvExtParser; myGrid.setCSVDelimiter('|'); myGrid.csv.row = "endOfRow"; var gridCsvData = myGrid.serializeToCSV(); $.post( "data/export.php", { csvdata: gridCsvData } ); 

PHP (export.php):

 $csvData = $_REQUEST['csvdata']; $csv = explode('endOfRow',$csvData); $myfile = "grid.csv"; $fh = fopen($myfile, 'w') or die("can't open file"); foreach($csv as $line) { fputcsv($fh, explode('|',$line),',','"'); } fclose($fh); //Redirect output to a client web browser (csv) header("Content-type: application/csv"); header("Content-Disposition: attachment; filename=grid.csv"); header("Pragma: no-cache"); header("Expires: 0"); 

This code works just fine in the sense that it exports the Grid exactly the way I want and saves it in 'grid.csv'. The problem is that it does not ask the user to save the file. Is this a problem for my PHP headers or do I need to put something in $ .post to report success? Thanks for any help!

Answer 1

You cannot request the user to upload a file using an AJAX call. One thing you can do is make an iFrame, insert a form into it, then POST. Thus, it will look like an AJAX call, but the user will be prompted to upload the file.

 // Create iFrame var iframe = document.createElement('iframe'); iframe.style.display = "none"; document.body.appendChild(iframe); // Get the iframe document var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; // Make a form var form = document.createElement('form'); form.action = 'data/export.php'; // Your URL form.method = 'POST'; // Add form element, to post your value var input = document.createElement('input'); input.type = 'hidden'; input.name = 'csvdata'; input.value = gridCsvData; // Your POST data // Add input to form form.appendChild(input); // Add form to iFrame // IE doesn't have the "body" property (iframeDoc.body || iframeDoc).appendChild(form); // Post the form :-) form.submit(); 

PS Your PHP code does not actually display the CSV on the screen, it just saves it to a file.

After the header calls, make sure you have:

 readfile($myfile); 

Answer 2

The right way to do this in HTML5 is to use the File API. See This for details: http://hackworthy.blogspot.com/2012/05/savedownload-data-generated-in.html .

If HTML5 is not an option, use this approach.

After you do a POST, generate a GET request for the file using:

 document.location = "file.csv"; 

Depending on the browser, the file will be saved (Chrome), or the user will be asked to select a file name to save as. Of course, the POST handler must save the file somewhere.

 $.ajax({ type: "POST", url: "post.php", success: function() { console.log("Worked!"); document.location = "test.csv"; }, error: function() { console.log("Failed!"); } });