Question

I have a upload function in my app. this function uploads an excel file and the parses it and copies the data the database. The actual upload doesn’t tale that long but the parsing does. I would like to have a progress bar so i could give the user some fees back.

I am not quite sure how to go about doing this. The stuff I have found online hasn’t been that helpful.

This What I have so far ..

My View:

<div>
    @using (Html.BeginForm("Upload", "Administrator", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        @Html.ValidationSummary(true, "File upload was unsuccessful. Please correct the errors and try again.")
        <input type="file" name="FileUpload1" />
        <input type="submit" name="Submit" id="Submit" value="Upload" onclick=" return startUpload();"/>
    }
</div>
<input type="button" value="test" onclick=" return startUpload();"/>
<div id="loadingScreen" title="Loading...">
    <div id="progressbar"></div>
</div>

My Scripts:

<script type="text/javascript">

$(document).ready(function() {
    // create the loading window and set autoOpen to false
    $("#loadingScreen").dialog({
        autoOpen: false,    // set this to false so we can manually open it
        dialogClass: "loadingScreenWindow",
        closeOnEscape: false,
        draggable: false,
        minWidth: 30,
        minHeight: 30,
        modal: true,
        buttons: {},
        resizable: false,
        open: function(event, ui) {
            $(".ui-dialog-titlebar-close").hide();
        },
    }); // end of dialog
});
    $(function () {
        //Progressbar initialization
        $("#progressbar").progressbar({ value: 0 });
    });

    function startUpload() {
        if (confirm("Doing this will override any previous data. Are you sure you want to proceed?")) {
            $("#loadingScreen").dialog('open');
            startProgressBar();
            return true;
        } else {
            return false;
        }
    }
    function startProgressBar() {
        //Making sure that progress indicate 0
        $("#progressbar").progressbar('value', 0);
        //Setting the timer
        setTimeout("updateProgressbar()", 500)
    };

    function updateProgressbar() {
        $.get('@Url.Action("UploadProgress")', function (data) {
            alert(data);
            //Updating progress
            $("#progressbar").progressbar('value', data);
            setTimeout("updateProgressbar()", 500)
        });
    };
</script>

What this does is it brings up the modal dialog box with the the progressbar but the bar doesnt get updated.

however if I have the following button

<input type="button" value="test" onclick=" return startUpload();"/>

this brings up the modal box and updates the bar as well.

What I can understand from this is that since the upload button is doing a post I cant to a get till is finishes …???

I am not that comfortable with JavaScript so if I am doing something really horrible please let me know …

Answer 1

This may be overkill but you can use SignalR. This is a library specifically for real-time communication between the server and client.

You would upload the file using a regular action, then render a SignalR-page showing the parsing progress (the server sends the client regular updates as it parses).

See this article for a walk-through specifically about a progress bar.