Question

I have the following code which is used to upload large files (~6MB) to an ASP .NET MVC2 application. After the file is uploaded it can take 5 minutes to return a response from the controller.

During this time, IE9 does not show any sign that processing is not yet completed, i.e. user can select other file and re-post.

How do you inform the user that an operation is not completed and disable the submit button until the old file processing is completed?

<% using (Html.BeginForm("InvoiceImport", "Grid", 
               FormMethod.Post, new { enctype = "multipart/form-data" }))
{%>
<input name="uploadFile" type="file" />
<input type="submit" name='invoice' value='Read'/>
<%} %>

Controller:

[AcceptVerbs(HttpVerbs.Post)]
[Authorize]
ActionResult ImportFromFile(HttpPostedFileBase uploadFile)
{
    Server.ScriptTimeout = 30 * 60;
    var res = ImportFromFile(uploadFile.InputStream); // takes lot of time
    TempData["Message"] = uploadFile.FileName + " Readed records " + res;
    return RedirectToAction("Complete");
}

Update

I looks like the most important issue is to prevent duplicate submits.
I tried code below to prevent duplicate submits but for unknown reason Session[“Upload”] is null
if submit button is pressed in second time.
How to prevent duplicate submits ?

View added

 <% if (TempData["Message"]!=null) { %>
   setTimeout( function() {
     showMessage ( '<%= TempData["Message"] as string %>');
    }, 300 );
    <% } %>


Controller

ActionResult ImportFromFile(HttpPostedFileBase uploadFile)
    {

        if (Session["Upload"] != null)
        {
            // todo: why this point is never reached ?
            TempData["Message"] = Session["Upload"] + " Please wait file is being processed";
            return View();
        }

        Session.Add("Upload", uploadFile.FileName);
        Server.ScriptTimeout = 30 * 60;
        ImportFromFile(uploadFile.InputStream);
        TempData["Message"] = uploadFile.FileName + " completed";
        Session.Remove("Upload");
        return RedirectToAction("Complete");
    }

Answer 1

The simplest solution to your problem is to disable the button and fields using javascript. Do you have any javascript libraries like jQuery in our page?

$('form').submit(function(){
   $(this).find('input').prop('disabled', true)
});

Something like that for jQuery. If you have several forms you might want to add an id to the form to target only this one.

UPDATE:

As the problem with resubmitting there are no dead simple solution:

To avoid the F5 problem. Make sure to redirect after the POST. Which you do, but I guess if it takes long time they might press F5 meanwhile.

A few solutions on top of my head to this problem.

• (IF you are using SQL) Generate a guid that you place in a hidden field on the form page. Make this a unique column in the database and insert it with the rest of the information. If they try to resubmit SQL will protect you by throwing an exception you can handle.

• There are alternatives to the above technique. Maybe you store those guids in a separate table and check against that or maybe in XML or cache or whatever.

• When you submit the form add a timestamp with javascript. The first thing you do on the server is to make sure you are within x seconds from when the button was clicked.

• While submiting (After the first submit) you could add a warning with javascript.

  window.onbeforeunload = function(){ return ‘Already saving! Please press no’; };

This last solution is not safe att all but very easy to add.