473,287 Members | 1,813 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,287 software developers and data experts.

HTML5 Javascript logic progress bar file downloading

11 Byte
I want to have a hyperlink file download in an HTML5 document I am running in 64 bit Firefox 90.0.2. I want to link an <a href> 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 the link to bring up the original 'file, save as' destination menu that an ordinary file href tag raises. I want to be able to display percentage completed, Bytes, KiloBytes or Megabytes completed, changing and displaying that information at the instant the file download progresses, inside an
HTML5 <progress> tag.

I have not been able to debug my own javascript code. I wish to avoid JQuery, and do not want to be using any server side logic, only platform independant, CSS or HTML5.

Can someone please respond with some vanilla javascript that acheives all this, in relation to my code fragment included down here, kindly, please?
Jul 28 '21 #1
18 13327
dev7060
626 Expert 512MB
I want to have a hyperlink file download in an HTML5 document I am running in 64 bit Firefox 90.0.2. I want to link an <a href> 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 the link to bring up the original 'file, save as' destination menu that an ordinary file href tag raises. I want to be able to display percentage completed, Bytes, KiloBytes or Megabytes completed, changing and displaying that information at the instant the file download progresses, inside an
HTML5 <progress> tag.

I have not been able to debug my own javascript code. I wish to avoid JQuery, and do not want to be using any server side logic, only platform independant, CSS or HTML5.

Can someone please respond with some vanilla javascript that acheives all this, in relation to my code fragment included down here, kindly, please?
What have you done so far?
Jul 29 '21 #2
Zachary1234
11 Byte
I am trying to work with a free online example of a vanilla Javascript downloader that will work with an HTML5 and.or CSS3 web page.

I wish to use no Javascript frameworks of libraries, and wish to use the <progress> bar tag to measure a file download
off of a <a href> tag, but also a <source>, or maybe a <button> tag (really any HTML5 applicable file downloading control element.

It is at https://zinoui.com/blog/ajax-request-progress-bar, and is located
a little bit further down the page under the bold heading of DOWNLOAD PROGRESS.

The problem with this example is that I can't work out how to

-additionally get it to automatically display the file/save as.. dialog box.
-additionally it to display any of the developer's choice of Bytes, KiloBytes, MegaBytes or GigaByles.

Can someone please post a reply here with the relevant code updates, kindly?
Jul 30 '21 #3
dev7060
626 Expert 512MB
The problem with this example is that I can't work out how to

-additionally get it to automatically display the file/save as.. dialog box.
Set the 'XMLHttpRequest.responseType' property to 'blob'. Then the response, as a blob, can be saved to a file. Note that this way the whole file would be put into the memory first before going to disk.

-additionally it to display any of the developer's choice of Bytes, KiloBytes, MegaBytes or GigaByles.
ProgressEvent interface has a property 'total' which contains the content length (the size of the body of the message).
Jul 31 '21 #4
Zachary1234
11 Byte
I have included the present state of my relevant code here:
Expand|Select|Wrap|Line Numbers
  1. <a name="download1" href="Bluefish-2.2.12-setup.exe">
  2. <span>href link for test file downloading<span></a>.
  3.  
  4. <progress name="progress1" value="0" max="100"></progress>
  5.  
  6. <script>
  7. var fileName = document.getElementsByName("download1")[0].getAttribute("href").toString();
  8.  
  9. var request = new XMLHttpRequest(); //Needs appropriate browser or server security setting.
  10.  
  11. request.responseType = "blob";
  12.  
  13. //var bytes = 0.0;
  14.  
  15. //var kiloBytes  = 0.0;
  16.  
  17. var megaBytes  = 0.0;
  18.  
  19. //var gigaBytes  = 0.0;
  20.  
  21. //var onePercentageRatio = 0.0;
  22.  
  23. //var percentage = 0.0;
  24.  
  25. //var firstLoad = 0.0;
  26.  
  27. //request.addEventListener("progress", function(e)
  28. //request.onreadystatechange = function(e)
  29. //request.onprogress = function(e)
  30.  
  31. request.onreadystatechange = function(e)
  32. {
  33. alert("Up to this point.");
  34.  
  35. //These two fields give the number of bytes.
  36. //alert("Progress so far: " + e.loaded + ". Total file size: " + e.total + ".");
  37.  
  38. //bytes += e.loaded;                    
  39.  
  40. //kiloBytes += e.loaded/1024;           
  41.  
  42. megaBytes += e.loaded/1048576;           
  43.  
  44. //gigaBytes += e.loaded/1073741824;      
  45.  
  46. //percentage += e.loaded/onePercentRatio;  
  47.  
  48. // + " Bytes.";  + " KiloBytes.";  + " MegaBytes."; + " GigaBytes."; + " %.";
  49.  
  50. /*
  51. if(firstLoad > e.firstLoad;)
  52. {
  53. onePercentRatio = e.total/100; 
  54. }
  55. */
  56.  
  57. document.getElementsByName("progress1")[0].innerHTML = megaBytes + " MegaBytes.";
  58.  
  59. };
  60.  
  61. //)
  62.  
  63. request.open("GET", fileName, true);
  64.  
  65. //request.setRequestHeader("Access-Control-Allow-Methods", "GET");
  66.  
  67. //request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
  68.  
  69. request.send();  //This line seems to be generating the error.
  70.  
-Whereabouts in 64 bit Firefox 90 can I find the Javascript "error line debugging" menu? Certainly, the area where it tells me the typing or logic (execution) errors, giving me line numbers too? I don't have a Firefox menu on my displayed menu bar, and there isn't anything under the menu\tools menu.

-I have found what I think I need, ProgressEvent.loaded, as well as ProgressEvent.total. Can someone there show me how to update my code so that it accesses these through Javascript appropriately,
repeatedly doing so, and sending the most recent updates into the HTML? A percentage, Bytes, Kilobytes, Megabytes, Gigabytes?
Aug 1 '21 #5
dev7060
626 Expert 512MB
Can someone there show me how to update my code so that it accesses these through Javascript appropriately,
repeatedly doing so, and sending the most recent updates into the HTML? A percentage, Bytes, Kilobytes, Megabytes, Gigabytes?
I see nothing new other than the code copied from the blog linked before. Displaying data is probably the most elementary thing. Use the DOM innerHTML property to update the values when the download progresses. 'total' and 'loaded' have the data size in bytes; which can be converted to other units.
Aug 1 '21 #6
Zachary1234
11 Byte
Expand|Select|Wrap|Line Numbers
  1. <a name="download1" href="Bluefish-2.2.12-setup.exe">
  2. href link for test file downloading</a>.
  3.  
  4. <progress name="progress1" value="0" max="100"></progress>
  5.  
  6. <script>
  7.  
  8. var file = document.getElementsByName("download1")[0].
  9.            element.getAttribute("href");
  10.  
  11. var request = new XMLHttpRequest();
  12.  
  13. request.open("GET",file,true);
  14.  
  15. file = "";
  16.  
  17. request.responseType = "blob";
  18.  
  19. request.onprogress = function(e) 
  20. {
  21.  if (e != null && e.lengthComputable == true) 
  22.   {
  23.   alert("Progress so far: " + e.loaded + ". Total file size: " + e.total + ".");    
  24.  
  25.   //window.status = "";
  26.  
  27.   //window.status = "Progress so far: "+e.loaded+". Total file size: "+ e.total+".";    
  28.  
  29.   var element = document.getElementsByName("progress1")[0];
  30.  
  31.   element.innerHTML = e.loaded + "%";
  32.   }    
  33. };
  34.  
  35. request.send();
  36. /*
  37. Cross-Origin Request Blocked: The Same Origin Policy disallows reading the 
  38. remote resource at 
  39. file:///C:/Users/User/Desktop/HTML5%20Experimenting/Bluefish-2.2.12-setup.exe. 
  40. (Reason: CORS request not http)
  41. */
  42. </script>
  43.  
-This have a debugging version of this script up to this point. Firefox is giving me the ERROR MESSAGE supplied, and I'm not sure what to
do to eliminate it. Is this a FireWall issue? What should I do to correct the supplied error? The script now gives me the file\save as.. dialog, and does now download the file successfully. I just need the instantaneous data at the right points in time, with no javascript errors, and I can update the script from there. What is this instance of the script doing wrong, at this point here?
Aug 2 '21 #7
dev7060
626 Expert 512MB
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the
remote resource at file:///C:/Users/User/Desktop/HTML5%20Experimenting/Bluefish-2.2.12-setup.exe.
(Reason: CORS request not http)
You're probably directly opening the file. You need to use a webserver (for http) and place the files into its directory.
Aug 2 '21 #8
Zachary1234
11 Byte
I did work out how to access the Firefox Javascript debugging console. <<ctrl> + <shift> + <k>>
is what does the trick.

-As far as I have understood, what is mentioned in the most recent reply back to me shouldn't matter.
I am just opening a local file in relative manner using my web browser (64 bit Firefox 90.0.2). Is there
someone else who can continue to help me debug my Javascript here so that I can finally get it running,
with no errors, as desired?
Aug 3 '21 #9
Zachary1234
11 Byte
Expand|Select|Wrap|Line Numbers
  1. <a name="download1" href="Bluefish-2.2.12-setup.exe">
  2. <span>href link for test file downloading<span></a>.
  3.  
  4. <progress name="progress1" value="0" max="100"></progress>
  5.  
  6. <script>
  7.  
  8. var fileName = document.getElementsByName("download1")[0].getAttribute("href").toString();
  9.  
  10. var request = new XMLHttpRequest(); //Needs appropriate browser or server security setting.
  11.  
  12. request.responseType = "blob";
  13.  
  14. //var bytes = 0.0;
  15.  
  16. //var kiloBytes  = 0.0;
  17.  
  18. var megaBytes  = 0.0;
  19.  
  20. //var gigaBytes  = 0.0;
  21.  
  22. //var onePercentageRatio = 0.0;
  23.  
  24. //var percentage = 0.0;
  25.  
  26. //var firstLoad = 0.0;
  27.  
  28. //request.addEventListener("progress", function(e)
  29. //request.onreadystatechange = function(e)
  30. //request.onprogress = function(e)
  31.  
  32. request.onreadystatechange = function(e)
  33. {
  34. alert("Up to this point.");
  35.  
  36. //These two fields give the number of bytes.
  37. //alert("Progress so far: " + e.loaded + ". Total file size: " + e.total + ".");
  38.  
  39. //bytes += e.loaded;                    
  40.  
  41. //kiloBytes += e.loaded/1024;           
  42.  
  43. megaBytes += e.loaded/1048576;           
  44.  
  45. //gigaBytes += e.loaded/1073741824;      
  46.  
  47. //percentage += e.loaded/onePercentRatio;  
  48.  
  49. // + " Bytes.";  + " KiloBytes.";  + " MegaBytes."; + " GigaBytes."; + " %.";
  50.  
  51. /*
  52. if(firstLoad > e.firstLoad;)
  53. {
  54. onePercentRatio = e.total/100; 
  55. }
  56. */
  57.  
  58. document.getElementsByName("progress1")[0].innerHTML = megaBytes + " MegaBytes.";
  59.  
  60. };
  61.  
  62. //)
  63.  
  64. request.open("GET", fileName, true);
  65.  
  66. //request.setRequestHeader("Access-Control-Allow-Methods", "GET");
  67.  
  68. //request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
  69.  
  70. request.send();  //This line seems to be generating the error.
  71.  

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/Users/User/Desktop/HTML5%20Experimenting/Bluefish-2.2.12-setup.exe. (Reason: CORS request not http).


-I have tried to update matters, but am still getting the same error, which I cannot eliminate. I cannot introduce a web server to send
the files to the web browser, and for my purposes here must just be able to file\open my .html files in the browser via a local file.

I have tried following the error link to https://developer.mozilla.org/en-US/...RequestNotHttp

-Can I have a hand debugging this error, while not introducing a webserver, and only opening the file locally?
Aug 3 '21 #10
dev7060
626 Expert 512MB
-Can I have a hand debugging this error, while not introducing a webserver, and only opening the file locally?
Another way is to disable the same-origin policy in the browser.

Displaying tags
Expand|Select|Wrap|Line Numbers
  1. <progress id="progress" value="0"></progress>
  2. <button id="button">Download</button>
  3. <h3>Loaded:</h3>
  4. <p id="loaded"></p>
  5. <h3>Total:</h3>
  6. <p id="total"></p>
To update the values
Expand|Select|Wrap|Line Numbers
  1. xhr.onprogress = function(e) {
  2.         if (e.lengthComputable) {
  3.             progressBar.max = e.total;
  4.             progressBar.value = e.loaded;
  5.             var sizeInMB1 = (e.loaded / (1024*1024)).toFixed(2);
  6.             var sizeInMB2 = (e.total / (1024*1024)).toFixed(2);
  7.             var sizeInKB1 = (e.loaded / 1024).toFixed(2);
  8.             var sizeInKB2 = (e.total / 1024).toFixed(2);
  9.             var per = ((e.loaded/e.total)*100).toFixed(2);
  10.             document.getElementById("loaded").innerHTML = e.loaded + " Bytes / " + sizeInKB1 + " KB / " + sizeInMB1 + " MB / " + per + "%";
  11.             document.getElementById("total").innerHTML = e.total + " Bytes / "  + sizeInKB2 + " KB / " + sizeInMB2 + " MB";
  12.         }
  13.     };
Then saving the blob as the file.

Results:

Firefox



Chrome



Is there someone else who can continue to help me debug my Javascript here so that I can finally get it running,
with no errors, as desired?
Good luck
Attached Images
File Type: gif firefox.gif (138.3 KB, 2069 views)
File Type: gif chrome.gif (221.5 KB, 2064 views)
Aug 3 '21 #11
Zachary1234
11 Byte
Expand|Select|Wrap|Line Numbers
  1. <a name="download1" href="Bluefish-2.2.12-setup.exe">
  2. <span>href link for test file downloading<span></a>.
  3.  
  4. <progress name="progress1" value="50" max="100"></progress>
  5.  
  6. <script>
  7.  
  8. var fileName = document.getElementsByName("download1")[0].getAttribute("href").toString(); 
  9.  
  10. var request = new XMLHttpRequest();
  11.  
  12. request.responseType = "blob";
  13.  
  14. request.onprogress = function(e) 
  15. {
  16.  
  17. if(e.total > 0 || e.loaded > 0)
  18. {
  19. alert("Progress so far: " + e.loaded + ". Total file size: " + e.total + ".");
  20. }
  21. }
  22.  
  23. request.open("GET", fileName, true);
  24.  
  25. request.send();
  26.  
  27. /*
  28. The following turns off the local file, non-webbrowser, firefox XMLHttpRequest error.
  29.  
  30. about:config security.fileuri.strict_origin_policy true stops, false allows through.
  31. */
  32.  
  33. document.getElementsByName("progress1")[0].value = 0; //number as a percentage, 0-100.
  34. </script>
-I have gotten to this point. I have solved my Firefox error by setting security.fileuri.strict_origin_policy to false for a littlewhile, and then resetting the browser. Calculating the values I need withstanding or not withstanding floating point problems is easy, from a bytes value. I just can't seem to get request.onprogress to fire with every fetch iteration, particlarly AFTER the file\save as... dialog has finished AFTER closing. Any more assistance, in terms of my latest code fragment here, please?
Aug 4 '21 #12
Sage50
1 Bit
Thanks for this post. Just need it.
Aug 4 '21 #13
Zachary1234
11 Byte
-I don't mean to be difficult. I just cannot see either the weaknesses in my latest code
fragment here, or the browser circumstances. Maybe someone else can given
me a go?
Aug 5 '21 #14
sidhuaujla5
1 Bit
I have not been able to debug my own javascript code. I wish to avoid JQuery, and do not want to be using any server side logic, only platform independant, CSS or HTML5.
Aug 18 '21 #15
spiceagent11
1 Bit
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.
Aug 18 '21 #16
dev7060
626 Expert 512MB
spiceagent11:
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.
No reply....??
What's the question?
Aug 20 '21 #17
team
1 Bit
@ dev7060


why does code in 12 not work?
Oct 2 '21 #18
dev7060
626 Expert 512MB
why does code in 12 not work?
The title of the alert box can't be edited/updated (security reasons). Either update the values on the page as shown in my code #11 or create a custom modal.
Oct 2 '21 #19

Sign in to post your reply or Sign up for a free account.

Similar topics

2
by: Julia Briggs | last post by:
Hello, I've read quite a bit of discussion on different approaches of how to create a download progress meter that can be implemented into a Web site. I understand that by the very nature of...
2
by: Bala | last post by:
Hi I am trying to download the PDF files from my webserver using ASP.Net. All my files are stored at F Drive on webserver. Like this F:\Main Folder\Sub Folder\Files\File1.pdf I am...
2
by: rinku | last post by:
Hi, I am using smarty but I am unable to write javascript in tpl file ..If i write javascript then it gives error. How can i do it and how can i define a variable in .tpl file.
1
by: tyreejp | last post by:
can javascript access a file that has been posted to page via an HTTP POST?
1
by: Muddasir | last post by:
Hello everyone. I am facing problem in downloading .xls file. I generate report and save data in excel sheet on server. and once user click the 'save data in excel format', an excel sheet is...
2
by: BarryM | last post by:
Hi could anybody tell me how to add a progress bar thats shows the percentage of a file that has been downloading of the internet from my program this is the code that i have been using to...
3
by: phpfreak2007 | last post by:
Hi all I tried to display an gif image while my file is downloading from server..But as downloading started, animation in gif is stopped...I tried to use thread also but then too its not...
10
Mayur2007
by: Mayur2007 | last post by:
Hello, I want to take a print of web page using mobile blue-tooth. How can we do that? My mobile site contains HTML5. Can somebody please help me? regards, Mayur
2
computerfox
by: computerfox | last post by:
Hello everyone, I am working on a new project and I need some help. I am trying to create an HTML5 player with a looping playlist. This will be a system where there will be many playlists and...
1
by: Coops99 | last post by:
Hi all, I’m a composer who is a novice programmer and I’m trying to make a sort of interactive score work. It would be a webpage on Wix that hosts HTML5 code and works with JavaScript. Right now, I...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.