Asynchronous processing of asp.net mvc with client-side feedback

Question

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

Description of what is about to happen
The user will be able to upload many potentially large images using plupload (without reloading the page). Then the server will perform the following actions for each uploaded image.

• The image will be changed to several versions (for example, large, small, medium, large)
• Each copy will have some image processing (e.g. convolution filter)
• These copy changes will be uploaded to Amazon S3
• Information about each image will be saved to the database (width, height, mimetype, filename)
• Then the server should cause some user feedback.

Providing Asynchronous Feedback
Plupload (a tool for downloading images) has a really nice visual feedback when uploading 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 the remote storage.

Vimeo does it beautifully. When you upload a video, it confirms that it has been downloaded, but then says: “We are encoding your video, wait,” and the user interface gives some kind of progress indicator.

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

• Update the message in the browser “5 of 15 images were processed” and I would like to
• A thumbnail of this image will appear.

Example action of an MVC controller

[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"); } 

Limitations
People using this web application will use the latest version of Chrome. No cross browser issues. We are using asp.net MVC 3 and SQL Server 2005

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

Answer 1

Rsenna refers to a link called WebSync, which is a .NET-based comet implementation. Great if you absolutely need a real-time notification upon completion of asynchronous processes.

However, I think an old-fashioned survey may be enough in your case. SomeAsyncImageProcessor is still an asynchronous process (so your application does not hang.)

However, as soon as “success” returns to the browser (which means the download is completed successfully), your page starts polling the “status” URL at regular intervals, possibly 1 or 2 seconds (depending on how long you expect these processes to take.)

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

The status URL returns the indicator that needs to be checked, or it returns success and the URL of the Amazon thumbnail (or the URL of your site.) Recheck until the last step is checked.