I'm currently facing some challenges with JavaScript as I attempt to create a desktop application using NW.JS. The issue arises when I drag and drop a .xml file into my app, triggering a function that reads the XML, performs certain tasks, and saves a new file in .csv format. Everything works fine so far, but I now want to incorporate a progress bar that updates during the execution of the function...
I've experimented with setInterval and setTimeout(), yet I keep encountering the same outcome: nothing happens until the function completes.
Below is an excerpt of my code:
// Equivalent to $(document).ready();
function ready(fn) {
if (document.readyState != 'loading'){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
// Execute this code when the page has loaded
ready(function(){
// prevent default behavior of changing page on dropped file
window.ondragover = function(e) { e.preventDefault(); return false };
// NOTE: ondrop events WILL NOT WORK without preventing default behavior in the ondragover event!
window.ondrop = function(e) { e.preventDefault(); return false };
var holder = document.getElementById('holder');
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragleave = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
e.preventDefault();
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function (event) {
########I'm doing stuff here to convert file and i want to update the progressbar##########
};
reader.readAsText(file);
//reader.readAsDataURL(file);
return false;
};
});
Thank you for your assistance.
Warm regards,