Progress bar on web system

Asked

Viewed 395 times

1

Does anyone know a way to make a progress bar on web system? In case my progress bar is not for file upload, it is a task that takes a while, then it would be nice a progress bar for the user not to think that locked. I’ve researched everything, but I haven’t been successful. In this case my system is in PHP, but I think there is no way to do this in PHP, because in PHP I cannot read the state of a request until it is finished. I thought I might be able to do this in Nodejs, but I have no knowledge of it at the moment. Can anyone tell me if it would be possible with Node and where to start?

progress-bar

  • Put the part of your code that requires this implementation.

2 answers

1

It is not for file upload, it is to update the progress of a request that takes a lot. I have already managed to resolve. But just for the record, the idea was to get the status of a request that takes a long time for the user to know what’s going on. For this I write in the session how much of my task has already been processed and put an ajax to be called every 5 seconds for example. The logic was already set, but I was locking the ajax because I was keeping the Séssion open. Then I discovered that I just closed the Session_write_close() with session_write_close() after writing the data that the ajax no longer hangs.

Thank you guys.

1

Marcos,

Your question is very generic, I don’t know how it is structured, but to track the progress of sending a file you can use something like this:

var formData = new FormData();
var arquivo = document.getElementById('arquivoParaEnvio').files[0];
formData.append('arquivoParaEnvio', arquivo);
var xhr = new XMLHttpRequest();

xhr.open('post', '/uploadURL', true);

xhr.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    var progresso = (e.loaded / e.total) * 100;
    console.log(progresso + " %");
  }
};

I don’t know if that’s the case, but there is Node-upload-Progress which is a Node.js module for managing upload and your progress: https://www.npmjs.com/package/node-upload-progress

Here you can find a complete example of using the module:

There is also a javascript library express-upload-Progress that manages upload progress and is styled with Bootstrap: https://github.com/zemirco/express-upload-progress

Browser other questions tagged progress-bar

You are not signed in. Login or sign up in order to post.