Asynchronous processing asp.net mvc with client side progress feedback

Question

I am building an image management tool and I want to know how I can create a Vimeo-like experience.

Description of what needs to happen
The user will be able to upload many potentially large images using plupload (no page reload). Then the server will take the following actions on each uploaded image.

The image will be resized into several versions (e.g. thumb, small, medium, large)
Each copy will have some image processing done (e.g. convolution filter)
These resized copies will be uploaded to Amazon S3
Info about each image will be stored to a database (width, height, mimetype, filename)
Then the server should trigger some sort of feedback to the user

Providing Asyncronous Feedback
Plupload (image uploading tool) has really nice visual feedback when uploading the files to my server, however, I want to be able to give additional feedback to the user while the server is doing all the image processing and uploading to remote storage.

Vimeo does this nicely. When you upload a video it gives confirmation that it has been uploaded, but then says "we are encoding your video, please wait" and the UI gives some sort of progress indicator.

I would like to give the user two kinds of feedback after the images have been uploaded to my server. Each time an image has been processed and uploaded to S3 I would like to:

Update a message on the browser saying "5 of 15 images have been processed" and I would like to
Have a thumbnail of that image appear.

An Example MVC Controller Action

[HttpPost]
public virtual ContentResult Upload(Guid albumId)
{
  foreach (string file in Request.Files)
  {
    HttpPostedFileBase f = Request.Files[file] as HttpPostedFileBase;
    if (f.ContentLength == 0)
      continue;

    var uploadDir = Server.MapPath("~/uploads/"+ albumId);
    var filePath = Path.Combine(uploadDir, Path.GetFileName(hpf.FileName));
    f.SaveAs(filePath);

    // How can I trigger some async task here that would be able
    // to trigger some sort of feedback to the browser when complete?
    SomeAsyncImageProcessor.ProcessImage(albumId, filePath); // ???
  }

  return Content("Success", "text/plain");
}

Constraints
The people using this web app will be using the latest version of Chrome. No cross-browser issues need to be addressed. We are using asp.net MVC 3 and SQL Server 2005

Can anyone point me in the right direction? Are there any great resources out there to show how I can accomplish something like this?

This is called Comet (or ReverseAJAX), and currently it is not greatly supported by IIS. Take a look at this: http://stackoverflow.com/questions/2259633/how-to-implement-reverseajax-comet-in-asp-net-mvc — rsenna, Mar 18 '11 at 17:20
Have you managed to find a solution: I am trying to do exactly this: The image will be resized into several versions (e.g. thumb, small, medium, large) Each copy will have some image processing done (e.g. convolution filter) These resized copies will be uploaded to Amazon S3 Info about each image will be stored to a database (width, height, mimetype, filename) but I cannot succeed could you please help me? — Marwan, Jun 19 '11 at 12:27

Peter J · Answer 1 · 2011-03-18T21:32:00.673

Rsenna's comment links to something called WebSync that is a .NET-based Comet implementation. Excellent if you absolutely need realtime notification as asynchronous processes complete.

However, I think old-fashioned polling might suffice in your case. SomeAsyncImageProcessor is still an asynchronous process (so your application doesn't freeze.)

However, once "success" is returned to the browser (indicating the upload has successfully completed), your page begins polling a "status" URL at regular intervals, maybe 1 or 2 seconds (depending on how long you expect these processes to take.)

For each image, in order, a status URL is checked. http://mysite/imageprocessor/status?albumId=guid&stepid=3

The status URL either returns an indicator that the status should be rechecked, or it returns success and a URL to the amazon thumbnail (or URL on your site.) Recheck until the final step is checked.

Asynchronous processing asp.net mvc with client side progress feedback

1 Answers1