Javascript - Downloading Files with AJAX and Showing a Progess Bar Currently most of the web applications show a normal link for the users to download a file. When the link is clicked, the browser detects that it is a file, and allows the user to download it.
- Hi, From Jquery ajax i am making a C# function call which is returing a file download option. If i am using $.ajax, it is not working, if i am giving window.location = url then that download box is coming.
- How to download a file through ajax request in asp.net MVC 4. Basically if we don't give a ajax call still we can download file through. JavaScript/jQuery to.
23 Feb 2017CPOL
This article is about how to convert files into Zip and download as single Zip.
Introduction
Now a days almost every websites supports download file feature. Now as a developer we face several issue when providing such funtionality. Let see the problems:
- We must know the file content type on client side to save it in proper format.
- As browsers cann't handle every type of file as some of them do not have any MimeType defined like '.bak' files.
- Sometimes, browser at client machine does not allows you to download file as it might be harmful in nature.
So we have to find a way to overcome such problems and the solution is zipping the file .i.e. 'ZIP'. Zipping files also has its own benefits apart from solving the mentioned problems like it also compress the file size thus making web bandwidth consumption low and thus increasing website as a user experience. So let's start it.
Background
The background is the knowledge of MVC. You should know how to add a project in MVC and add a Controller. If you wants to start with MVC first you can learn it from my other articles as listed below: As we will be using ajax so knowledge of Jquery is also pre-requisite. We will be creating a page which will be having a button that will post a ajax request to server and server will return file as a zip.
Using the Code
We will be using DotNetZip library for zipping files. Please visit this link DotNetZip
We also be using javascript FileSaver.js library for saving the zip files. Please visit this link FileSaver.js
Now add an MVC project. I assume that you have created a HomeController and Index method in it. The index method will return a index cshtml View. Now We will add a mthod which will be invoked on click of a button from Index page.
So basically our process will be like:
Load Index Page >> 'Click Download Zip' >> Invoke Ajax post method >> Invoke MVC Controller Method (Which will be using DotNetZip library and Zip the files) >> save file.
Let first add the DotNetZip library reference to our project. For that you need to navigate to Tools >> NuGet package Manager >> Package Manager Console
Now type the following command: 'Install-Package DotNetZip' (without quotes). Now you have installed the DotNetZip library and you can verify it from 'References' folder in SolutionExplorer window.
Now add the FileServer.js library reference to our project/HTML. For this you can either download FileSaver.js file from server and its refence into html or use cdn path as I used.
Now follow the steps to create a working demo.
Step 1: Add using reference to 'HomeController' using using Ionic.Zip;
So you can see its quite simple Index method is added. Now let see the code in our CSHTML page (Index.cshtml).
Step 2: Add Images to Image folder.
Here is the image of my Project folder structure. I have added an Image folder to project and added two images into it so that I can zip these images and download.
So you can see its quite simple structure. Now lets start writing the code for a method/action that will return the files as a single zip file.
So you can see its quite simple code and its self explanatory. Enter your doubts in comment if any
Step 3: Index.cshtml View Code
Below is the html code that has A simple download button that will call the above method and in result downloads a zip file that will have two files zipped in it.
Till now we have a running code that will download files as a single Zip Unit with compressed size. You can download the code file in link attached with this article. Further we will see how we can use an ajax call for the same.
Step 4: Updating code to download File with Ajax Call.
Now this is the main step which is problematic in most cases. It is verfy tricky to download a file content 'blob' as a file and save it as a zip. For this I have added a script reference (filesaver.js) as you can see in above html code as well. Below is the full code.
Note: I have used plain HttpRequest as : jQuery ajax is not able to handle binary responses properly (can't set responseType), so it's better to use a plain XMLHttpRequest call. For more detail on this, you can read this Stackoverflow link.
Javascript Ajax Call Download File
Now you have full code, you just need to build the project and run it. Whola!! You have done it.
Points of Interest
You can convert as many as file you want into a single zip and push to client machine. You bandwidth is saved. You can also save a MemoryStream object to zip and download that. Keep in mind jquery doesn't support 'blob' till the time and we can have some workaround but using plain XmlHttpRequest is always a winner.
Things to learn
You can learn how we can modify juery request to save blob/binary/arraybuffer objects.
Javascript Download File Script
You can learn how we can save zip blob directly without using third party api/script/plugins.
That's all from my side for this article, comments and suggestions are welcomed.
Active2 years, 6 months ago
I have a button and
onclick
it will call an ajax function. Here is my ajax function
I create the csv file based on the user input. After it's created I want it to prompt download or force download(preferably force). I am using the following script at the end of the php file to download the file. If I run this script in a separate file it works fine.
But If I run it at the end of csv.php it outputs the contents of the file.csv into the page(into the ajaxDiv) instead of downloading.
Is there a way to force download the file at the end of csv.php?
theking963theking9631,08055 gold badges2121 silver badges3939 bronze badges
5 Answers
AJAX isn't for downloading files. Pop up a new window with the download link as its address, or do
Marc BMarc Bdocument.location = ...
.322k3131 gold badges340340 silver badges439439 bronze badges
A very simple solution using jQuery:
on the client side:
and on the server side, make sure you send back the correct
Muthu KumaranContent-Type
header, so the browser will know its an attachment and the download will begin.15.2k55 gold badges3535 silver badges6161 bronze badges
blink281blink281
@joe : Many thanks, this was a good heads up!
I had a slightly harder problem:1. sending an AJAX request with POST data, for the server to produce a ZIP file2. getting a response back3. download the ZIP file
So that's how I did it (using JQuery to handle the AJAX request):
- Initial post request:
The 'request/url' handles the zip creation (off topic, so I wont post the full code) and returns the following JSON object. Something like:
The 'request/download' can perform some security checks, if needed, and generate the file transfer:
DarioDario
I have accomplished this with a hidden iframe. I use perl, not php, so will just give concept, not code solution.
Client sends Ajax request to server, causing the file content to be generated. This is saved as a temp file on the server, and the filename is returned to the client.
Client (javascript) receives filename, and sets the iframe src to some url that will deliver the file, like:
Server slurps the file, unlinks it, and sends the stream to the client, with these headers:
Works like a charm.
joejoe60811 gold badge99 silver badges1616 bronze badges
You can't download the file directly via ajax.
You can put a link on the page with the URL to your file (returned from the ajax call) or another way is to use a hidden
iframe
and set the URL of the source of that iframe
dynamically. This way you can download the file without refreshing the page.Here is the code
Naimish B. MakwanaNaimish B. Makwana