0

I am uploading multiple files using javascript.

After I upload the files, I need to run several processing functions.

Because of the processing time that is required, I need a UI on the front telling the user the estimated time left of the entire process.

Basically I have 3 functions:

  1. /upload - this is an endpoint for uploading the files
  2. /generate/metadata - this is the next endpoint that should be triggered after /upload
  3. /process - this is the last endpoint. SHould be triggered after /generate/metadata

This is how I expect the screen to look like basically.

enter image description here

Information such as percentage remaining and time left should be displayed.

However, I am unsure whether to allow server to supply the information or I do a hackish estimate solely using javascript.

I would also need to update the screen like telling the user messages such as

"currently uploading"

if I am at function 1.

"Generating metadata" if I am at function 2.

"Processing ..." if I am at function 3.

Function 2 only occurs after the successful completion of 1.

Function 3 only occurs after the successful completion of 2.

I am already using q.js promises to handle some parts of this, but the code has gotten scarily messy.

I recently come across Backbone and it allows structured ways to handle single page app behavior which is what I wanted.

I have no problems with the server-side returning back json responses for success or failure of the endpoints.

I was wondering what would be a good way to implement this function using Backbone.js

Kim Stacks
  • 10,202
  • 35
  • 151
  • 282

2 Answers2

2

You can use a "progress" file or DB entry which stores the state of the backend process. Have your backend process periodically update this file. For example, write this to the file:

{"status": "Generating metadata", "time": "3 mins left"}

After the user submits the files have the frontend start pinging a backend progress function using a simple ajax call and setTimeout. the progress function will simply open this file, grab the JSON-formatted status info, and then update the frontend progress bar.

You'll probably want the ajax call to be attached to your model(s). Have your frontend view watch for changes to the status and update accordingly (e.g. a progress bar).

Cianan Sims
  • 3,419
  • 1
  • 21
  • 30
  • Thank you. Have you implemented something like this before using backbone? – Kim Stacks Mar 02 '13 at 06:16
  • 1
    @kimsia I have an app in production that follows this exact paradigm. The model queries for status updates and the progress modal (view) updates accordingly. – Cianan Sims Mar 02 '13 at 08:30
  • Thank you for your answer. By the way, may I ask if you use any other js frameworks other than backbone to implement this? E.g., Marionette? – Kim Stacks Mar 02 '13 at 09:04
  • @kimsia Not at this point. When I have time I'm sure I'll try others out but for now Backbone serves me just fine. – Cianan Sims Mar 02 '13 at 09:27
  • @kimsia - just want to point out that Marionette is just sugar on top of Backbone, but more to your point the implementation will be the same in any framework or not: interval based polling/websockets and update the display accordingly. – Nick Sharp Mar 09 '13 at 03:32
  • Thank you, everyone! I will mark this as the answer and try it out accordingly. – Kim Stacks Mar 09 '13 at 04:02
0

Long Polling request: Polling request for updating Backbone Models/Views

Basically when you upload a File you will assign a "FileModel" to every given file. The FileModel will start a long polling request every N seconds, until get the status "complete".

Community
  • 1
  • 1
Daniel Aranda
  • 6,426
  • 2
  • 21
  • 28