[Collection Upload] Progress bar not updated while async uploading a file

[ioleo]

The progress bar is shown initially at 0%. Then for a few seconds nothing happens. And then the widget is updated with another file.

During the upload, progress information should be sent back to the browser and update the progress bar accordingly.

@sescandell Is this a bug in your code, or you didn't implement it? Any tips how this could be fixed?

[ioleo]

@sescandell I studied the code and it seems it's not a bug.. it just wasn't implemented.

[ioleo]

@sescandell I have an idea how we could implement this:

Right now the workflow is:

1. When "Upload" is started, a POST request (with files attached) is sent
2. The CollectionUploadListener catches the request and stores attached files in session
3. The response is sent to the browser confirming that all files have been saved

So we actually have two states:

1. Upload started
2. Upload finished

In order to display a progress bar we need to change the workflow to:

1. When "Upload" is started, files are being sent (in chunks?) to the server
2. After each chunk is recieved (and saved) the server returns a JSON response confirming
3. The JS code updates the progress bar when it recieves confirmation JSON from server
4. This continues until all chunks are recieved by the server, when the final response is generated, confirming that all files have been fully stored in session

So the possible states are:

1. Upload started
2. Upload in progress:
   • Chunk 1 confirmed
   • Chunk 2 confirmed
   • ...
   • Chunk N confirmed
3. Upload finished

[ioleo]

@sescandell I wonder if this is worth the hassle :) Maybe we just remove the progress bar (since it's useless right now) and "don't fix it if it ain't broken"? Except the progress bar everything seems to work fine.

[sescandell]

Hi @loostro

To be honest, I don't remember how this have been implemented...
There is also some other ways to handle "state of uploads" but it depends on server capacities if I'm not wrong. One thing sure, I will not have time to check this now but, as you said, I'm not sure this is blocking for now and simply "hiding it" should make the trick (we'll focus on that later).

[ioleo]

@sescandell OK, I'll create a PR replaceing the "progress bar" with a spinning cog icon from FontAwesome icon set. This way User will have some indicator informing that "something is being loaded".

[sescandell]

👍

[sescandell]

Hi @loostro

I just run the code from https://github.com/sescandell/CollectionUploadSample and the progress bar is working well.

I think things have been broken since we moved to Bootstrap3.

[sescandell]

I reopened the issue because this is something that was working well before... before I don't know what. I think it was before moving to TB3. JS have not been updated since

[ioleo]

@sescandell OK, I commented out part of JS code in my last PR. So, if you find what was wrong, we have to remove the comments here