HTML5 Javascript logic progress bar file downloading

**dev7060** · Jul 29 '21, 07:49 PM

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?

**Zachary1234** · Jul 30 '21, 06:40 AM

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?

**dev7060** · Jul 31 '21, 06:44 PM

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).

**Zachary1234** · Aug 1 '21, 02:01 AM

I have included the present state of my relevant code here:

Code:

<a name="download1" href="Bluefish-2.2.12-setup.exe">
<span>href link for test file downloading<span></a>.

<progress name="progress1" value="0" max="100"></progress>

<script>
var fileName = document.getElementsByName("download1")[0].getAttribute("href").toString();
 
var request = new XMLHttpRequest(); //Needs appropriate browser or server security setting.

request.responseType = "blob";

//var bytes = 0.0;

//var kiloBytes  = 0.0;

var megaBytes  = 0.0;

//var gigaBytes  = 0.0;

//var onePercentageRatio = 0.0;

//var percentage = 0.0;

//var firstLoad = 0.0;

//request.addEventListener("progress", function(e)
//request.onreadystatechange = function(e)
//request.onprogress = function(e)

request.onreadystatechange = function(e)
{
alert("Up to this point.");

//These two fields give the number of bytes.
//alert("Progress so far: " + e.loaded + ". Total file size: " + e.total + ".");

//bytes += e.loaded;                    

//kiloBytes += e.loaded/1024;           

megaBytes += e.loaded/1048576;           

//gigaBytes += e.loaded/1073741824;      

//percentage += e.loaded/onePercentRatio;  

// + " Bytes.";  + " KiloBytes.";  + " MegaBytes."; + " GigaBytes."; + " %.";

/*
if(firstLoad > e.firstLoad;)
{
onePercentRatio = e.total/100; 
}
*/

document.getElementsByName("progress1")[0].innerHTML = megaBytes + " MegaBytes.";

};

//)

request.open("GET", fileName, true);

//request.setRequestHeader("Access-Control-Allow-Methods", "GET");

//request.setRequestHeader("X-Requested-With", "XMLHttpRequest");

request.send();  //This line seems to be generating the error.

-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.l oaded, as well as ProgressEvent.t otal. 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?

**dev7060** · Aug 1 '21, 08:59 PM

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.

**Zachary1234** · Aug 2 '21, 04:11 AM

Code:

<a name="download1" href="Bluefish-2.2.12-setup.exe">
href link for test file downloading</a>.

<progress name="progress1" value="0" max="100"></progress>

<script>

var file = document.getElementsByName("download1")[0].
           element.getAttribute("href");
 
var request = new XMLHttpRequest();
 
request.open("GET",file,true);

file = "";
 
request.responseType = "blob";
 
request.onprogress = function(e) 
{
 if (e != null && e.lengthComputable == true) 
  {
  alert("Progress so far: " + e.loaded + ". Total file size: " + e.total + ".");    
  
  //window.status = "";
  
  //window.status = "Progress so far: "+e.loaded+". Total file size: "+ e.total+".";    
  
  var element = document.getElementsByName("progress1")[0];
  
  element.innerHTML = e.loaded + "%";
  }    
};

request.send();
/*
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)
*/
</script>

-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?

**dev7060** · Aug 2 '21, 07:01 PM

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the
remote resource at file:///C:/Users/User/Desktop/HTML5%20Experim enting/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.

**Zachary1234** · Aug 3 '21, 12:56 AM

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?

**Zachary1234** · Aug 3 '21, 02:23 AM

Code:

<a name="download1" href="Bluefish-2.2.12-setup.exe">
<span>href link for test file downloading<span></a>.

<progress name="progress1" value="0" max="100"></progress>

<script>

var fileName = document.getElementsByName("download1")[0].getAttribute("href").toString();
 
var request = new XMLHttpRequest(); //Needs appropriate browser or server security setting.

request.responseType = "blob";

//var bytes = 0.0;

//var kiloBytes  = 0.0;

var megaBytes  = 0.0;

//var gigaBytes  = 0.0;

//var onePercentageRatio = 0.0;

//var percentage = 0.0;

//var firstLoad = 0.0;

//request.addEventListener("progress", function(e)
//request.onreadystatechange = function(e)
//request.onprogress = function(e)

request.onreadystatechange = function(e)
{
alert("Up to this point.");

//These two fields give the number of bytes.
//alert("Progress so far: " + e.loaded + ". Total file size: " + e.total + ".");

//bytes += e.loaded;                    

//kiloBytes += e.loaded/1024;           

megaBytes += e.loaded/1048576;           

//gigaBytes += e.loaded/1073741824;      

//percentage += e.loaded/onePercentRatio;  

// + " Bytes.";  + " KiloBytes.";  + " MegaBytes."; + " GigaBytes."; + " %.";

/*
if(firstLoad > e.firstLoad;)
{
onePercentRatio = e.total/100; 
}
*/

document.getElementsByName("progress1")[0].innerHTML = megaBytes + " MegaBytes.";

};

//)

request.open("GET", fileName, true);

//request.setRequestHeader("Access-Control-Allow-Methods", "GET");

//request.setRequestHeader("X-Requested-With", "XMLHttpRequest");

request.send();  //This line seems to be generating the error.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/Users/User/Desktop/HTML5%20Experim enting/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?

**dev7060** · Aug 3 '21, 07:37 PM

-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

Code:

<progress id="progress" value="0"></progress>
<button id="button">Download</button>
<h3>Loaded:</h3>
<p id="loaded"></p>
<h3>Total:</h3>
<p id="total"></p>

To update the values

Code:

xhr.onprogress = function(e) {
		if (e.lengthComputable) {
			progressBar.max = e.total;
			progressBar.value = e.loaded;
			var sizeInMB1 = (e.loaded / (1024*1024)).toFixed(2);
			var sizeInMB2 = (e.total / (1024*1024)).toFixed(2);
			var sizeInKB1 = (e.loaded / 1024).toFixed(2);
			var sizeInKB2 = (e.total / 1024).toFixed(2);
			var per = ((e.loaded/e.total)*100).toFixed(2);
			document.getElementById("loaded").innerHTML = e.loaded + " Bytes / " + sizeInKB1 + " KB / " + sizeInMB1 + " MB / " + per + "%";
			document.getElementById("total").innerHTML = e.total + " Bytes / "  + sizeInKB2 + " KB / " + sizeInMB2 + " MB";
		}
	};

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 Files

**Zachary1234** · Aug 4 '21, 05:44 AM

Code:

<a name="download1" href="Bluefish-2.2.12-setup.exe">
<span>href link for test file downloading<span></a>.

<progress name="progress1" value="50" max="100"></progress>

<script>

var fileName = document.getElementsByName("download1")[0].getAttribute("href").toString(); 
 
var request = new XMLHttpRequest();

request.responseType = "blob";

request.onprogress = function(e) 
{

if(e.total > 0 || e.loaded > 0)
{
alert("Progress so far: " + e.loaded + ". Total file size: " + e.total + ".");
}
}

request.open("GET", fileName, true);

request.send();

/*
The following turns off the local file, non-webbrowser, firefox XMLHttpRequest error.

about:config security.fileuri.strict_origin_policy true stops, false allows through.
*/

document.getElementsByName("progress1")[0].value = 0; //number as a percentage, 0-100.
</script>

-I have gotten to this point. I have solved my Firefox error by setting security.fileur i.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.onprogr ess 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?

**Sage50** · Aug 4 '21, 11:52 AM

Thanks for this post. Just need it.

**Zachary1234** · Aug 5 '21, 07:34 AM

-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?

**sidhuaujla5** · Aug 18 '21, 12:52 PM

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.

HTML5 Javascript logic progress bar file downloading

HTML5 Javascript logic progress bar file downloading

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment