Member Avatar for alanlee9898

Hi,

I wanted to create a progress bar with the jquery modal when it's downloading. How I can do it in jquery / Ajax ?

I was trying with this http://johnculviner.com/post/2012/03/22/Ajax-like-feature-rich-file-downloads-with-jQuery-File-Download.aspx , but not working.

The code for the download link :
<a class="download" href="${cmd.fileUrl}"><span>CSV</span></a>

It's using url to download the file.

Anyone can help ?

  • 2 Contributors
  • 8 Replies
  • 639 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by alanlee9898

Dani AI

Generated

Short answer — the jQuery plugin being used relies on an iframe + server-set cookie to detect a download, and that detection happens when the response headers arrive (not when all bytes finish). That makes the modal/pop-up timing brittle across browsers; modern alternatives are XHR/Fetch (gives real progress events) or an asynchronous “generate file / poll for ready / then download” workflow for very large CSVs. (github.com)

Why Chrome/IE behaved differently from Firefox in this thread: the plugin expects a Set-Cookie in the download response and polls document.cookie. Browsers store cookies from the response header as soon as the response headers are received; HTTP headers are sent before the response body, so the cookie usually appears early — which signals “download response received” rather than “file transfer complete.” Because browsers and their UI timing differ, the same cookie-based trick can look like it finishes immediately in some browsers and later in others. Also note: an HTML meta tag does not control cookie persistence — cookie lifetime must be set server-side with Expires/Max-Age or similar attributes. (developer.mozilla.org)

Recommended approaches (robust options):

  • Server-side job + status polling: submit the CSV job, return an id, poll a status endpoint until ready, then open a normal download URL (no cookie trick). This is safe for very large/generated files. (stackoverflow.com)
  • XHR / Fetch streaming with progress: use XHR progress events or Fetch + ReadableStream.getReader() to show percent and then save the result as a Blob (with msSaveBlob fallback for legacy IE). This gives real progress and exact completion detection; it requires modern browsers and enough memory to hold the blob. Example (simplified):
// read stream -> collect chunks -> save as blob
const r = await fetch('/download-csv');
const reader = r.body.getReader();
const chunks = [];
let received = 0;
const total = +r.headers.get('Content-Length') || 0;
while (true) {
  const {done, value} = await reader.read();
  if (done) break;
  chunks.push(value);
  received += value.length;
  // update progress = total ? (received/total)*100 : indeterminate
}
const blob = new Blob(chunks, {type: 'text/csv'});
// save: navigator.msSaveBlob(blob, 'report.csv') or createObjectURL + <a download>

(See ReadableStream/XHR docs and blob-download examples for cross-browser fallbacks.) (developer.mozilla.org)

Troubleshooting checklist specific to and the thread: confirm the Set-Cookie header actually appears on the download response in DevTools, verify same-origin (iframe cookie only works for same-origin responses), set a sensible Max-Age/Path/domain on the cookie, log the plugin callbacks to see which branch fires, and consider switching to the server-job or Fetch approach if the CSV generation is expensive or memory-sensitive. The plugin README and issues mention exactly these cross-browser and cross-domain caveats. (github.com)

Recommended Answers

All 8 Replies

Member Avatar for Taywin

What does it mean by "not working"? How would we know what it is supposed to be?

To be honest, I do not like the idea of using JavaScript to download files because of security issue. This is why browsers do not allow JavaScript in the first place (but Ajax breaks through). Though, there are some people who think that it is what they want and is convenient, so they suppress the security concern. Please remember, convenience is a trade off for security/privacy.

Edited by Taywin
Member Avatar for alanlee9898

Hi,

But I just want to display a popup to indicate loading / progress bar, because the files need to download is a large data.

I'm using servlet and content-type - application/octet-stream.

You have any idea ? Because once user click the download, he have to wait about 20-50 sec. It is a csv files contains million of records.

Anyone can help ?

Member Avatar for Taywin

OK, so what error did you get from it? Did it silently fail? What browser did you try it on? Do you have any plug-in for browser to detect whether an error from JavaScript occurs on the page?

The plug-in requires that the browser used in this must accept cookies. It is not common that a user would set his/her browser to not accept cookies nowadays, but that's just in case. I think in your case, it is about trouble-shooting more. The back-end does not mean anything much. The application/octet-stream can be set using MIME-type (the plug-in page explains that).

Member Avatar for alanlee9898

What plug in to use? I'm using google chrome to test it.

I able to download, and loading bar with popup has show up but it doesn't close it back.

Do I need any calculation on the JavaScript ? So it know when to close it back when finish downloading.

Member Avatar for Taywin

Sorry for not reply earlier. Anyway, you mean you implement it from scratch. That's great.

Anyway, you shouldn't attempt to calculate the time to close. You should, instead, have another ajax call (after the pop up) to wait for the complete send file from the server to remove the pop up. I don't know your implementation, so it would be up to you.

Member Avatar for alanlee9898

Now I able to download and close the pop up on firefox browser. But for IE and chrome, it just pop up and close immediately. Do you have any idea ?

I have include Set-Cookie filedownload=true. And only firefox would wait till download is finish then only remove the cookie, whereas IE and chrome remove the cookie immediately.

Member Avatar for Taywin

You could read this page and this page for more information. The cookies on IE and chrome are not persisting by default. You need to define the persistance using HTML meta tag. On Firefox, it is by default.

Member Avatar for alanlee9898

Do you have example to define it using HTML tag? I able to get the cookie on Chrome but it gone too fast.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.