469,142 Members | 1,129 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,142 developers. It's quick & easy.

HTML5 Javascript logic progress bar file downloading

10 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
16 5162
dev7060
489 Expert 256MB
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
10 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
489 Expert 256MB
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
10 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
489 Expert 256MB
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
10 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
489 Expert 256MB
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
10 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
10 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
489 Expert 256MB
-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, 418 views)
File Type: gif chrome.gif (221.5 KB, 418 views)
Aug 3 '21 #11
Zachary1234
10 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
10 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
489 Expert 256MB
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

Post your reply

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

Similar topics

2 posts views Thread by Bala | last post: by
2 posts views Thread by rinku | last post: by
1 post views Thread by Muddasir | last post: by
reply views Thread by zhoujie | last post: by
1 post views Thread by Mortomer39 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.