I want to have a hyperlink file download in an html5 document. I want to link the tag to some vanilla javascript, by ajax and XMLHttpRequest. I want to use the javascript to examine the file download as it leaves the browser and goes to the download client device’s directory. I want to be able to display percentage completed, bytes, kilobytes or Megabytes completed, changing and displaying at the instant the file download progresses, irrespective of any length setting(s) on the progress bar.
I have not been able to debug my own javascript code, or any volunteer code from the internet, particularly code that does NOT use PHP or JQuery.
Is it possible to achieve this using only client side Javascript or CSS or HTML5?
Can someone please respond with some vanilla javascript that runs correctly, in relation to my code fragment included down here, kindly, please?
Copying all of this code into the html of an appropriately setup html5 document, and the javascript into a script tag area, I find that this code does not run while my 200 Mb file downloads. I certainly get
no action on my progress bar. I am using 64 bit Firefox version 90.0.2 on 64 bit Windows 10.
Could you please review this code, perhaps with this web browser, because it in fact doesn’t give me
the results that I have hoped for.
The only browser that would require major code adjustments would be IE, which doesn’t support fetch() or basically anything added to the language or DOM API since 2015. Note though that for AJAX to work, the requested file must be served from the same origin (or CORS must be enabled); and it won’t work if you just open your HTML file from the file system.
Other than that, are you getting any errors in the console, and does the requested file show up in the network panel of the browser dev tools?