Download PDF file From FTP using XMLHttpRequest and a common handler

Question

I am trying to download a PDF file from an FTP server using a Jquery Ajax request. I called http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/ .

My jQuery ajax call below

$.ajax({ xhr: function () { var xhr = new window.XMLHttpRequest(); //Download progress xhr.addEventListener("progress", function (evt) { console.log("Event :"+evt.lengthComputable); if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; //Do something with download progress console.log(percentComplete); } }, false); return xhr; }, type: 'POST', url: "Downloader.ashx", success: function (data) { //Do something success-ish } }); 

And the code of my common code for C # to download the file below

  public void ProcessRequest(HttpContext context) { DownLoadFilesFromFTp("MyFile.pdf", "Foldername"); } public bool DownLoadFilesFromFTp(string fileName,string ftpFolder) { //Create FTP Request. try { string Ftp_Host = System.Configuration.ConfigurationManager.AppSettings["Ftp_Host"]; string Ftp_UserName = System.Configuration.ConfigurationManager.AppSettings["Ftp_UserName"]; string Password = System.Configuration.ConfigurationManager.AppSettings["Password"]; string downloadpath= System.Configuration.ConfigurationManager.AppSettings["downloadpath"]; //Fetch the Response and read it into a MemoryStream object. string ftpurl = Ftp_Host + ftpFolder + "/" + fileName; FtpWebRequest reqFTP; reqFTP = (FtpWebRequest)FtpWebRequest.Create(new Uri(ftpurl)); reqFTP.Credentials = new NetworkCredential(Ftp_UserName, Password); reqFTP.KeepAlive = false; reqFTP.Method = WebRequestMethods.Ftp.DownloadFile; reqFTP.UseBinary = true; reqFTP.Proxy = null; reqFTP.UsePassive = false; FtpWebResponse response = (FtpWebResponse)reqFTP.GetResponse(); Stream responseStream = response.GetResponseStream(); FileStream writeStream = null; //if (fileName.Substring(fileName.Length - 3, 3) == "pdf" || fileName.Substring(fileName.Length - 3, 3) == "PDF") //{ writeStream = new FileStream(downloadpath + fileName, FileMode.Create); //} int Length = 2048; // 2048; Byte[] buffer = new Byte[Length]; int bytesRead = responseStream.Read(buffer, 0, Length); while (bytesRead > 0) { writeStream.Write(buffer, 0, bytesRead); bytesRead = responseStream.Read(buffer, 0, Length); } responseStream.Close(); writeStream.Close(); response.Close(); return true; } catch (WebException wEx) { return false; } catch (Exception ex) { return false; } } 

When I start downloading code files to a folder without any problems and to call Ajax
if (evt.lengthComputable) {
}
When I evt console I got below result
It always returns false, so I can not track the progress.

1) is something wrong with the code?
2) Any alternative way to display a progress bar on pdf download

Answer 1

For loaded bytes, just show the progress bar. Just view the xhr.upload.onprogress event. The browser knows the size of the files that it should download and the size of the downloaded data, so it can provide information about the progress.

For bytes downloaded , this is a little more complicated because in this case only the browser knows the size of the bytes it receives.

The reason evt.lengthComputable is 0 , because the browser does not know how many bytes will be sent in the server request.

To do this, there is a solution, just set the Content-Length header on the server, as shown below, to get the total byte size that the browser will receive.

 // prepare the response to the client. resp is the client Response var resp = HttpContext.Current.Response; // Add Content-Length of the file to headers // if the headers is not set then the evt.loaded will be 0 resp.AddHeader("Content-Length", "lengthOfYourFile"); 

Answer 2

Your JS code looks great. I am not a C # programmer, but I noticed that on the C # server side, upload the ftp file and save it to the disk server, but don’t reply / send the PDF file to JS SIDE? JS is loading 0 bytes. and evt.lengthComputable is always false / 0.