Is it possible to have a progress bar on the client side linked to the progress of saveAs()?

Question

I have a controller for uploading a file of any type. A condensed version of it is

    [HttpPost]
    public ActionResult Index (HttpPostedFileBase file, string selectedOrgName, string selectedCatName, string previouslyUploadedFilesJSON = null)
    {

           // ...... bunch of stuff 

            try
            {
                file.SaveAs(newFileServerPathAndName); // Saves file with new file name in assets folder
            }
            catch
            {
                throw new Exception("Error when trying to save file to Assets folder.");
            }

       // ... bunch of other stuff

        return View();

    }

and the model is like

@using (Html.BeginForm("Index",
                        "FileUpload",
                        FormMethod.Post,
                        new { enctype = "multipart/form-data", @id ="upload-file-form"}))
{
<div>
        <label for="file">Upload File:</label>
        <input type="file" name="file" id="file" /><br>
        <input type="submit" value="Upload" /><img class="loading-icon hidden" src="/ClientPortal/images/loadinggif.gif"/>
        <input type="hidden" name="selectedOrgName" class="selectedOrgInput" />
        <input type="hidden" name="selectedCatName" id="selectedCatInput"/>
        <input type="hidden" name="previouslyUploadedFilesJSON" value="@ViewBag.uploadedFilesJSON" />
        <br><br>
</div>
}

and what I'm wondering is whether it's possible for me to have a progress bar on the client's side that is linked to the progress of the saveAs function. In Google Chrome there is already something on the bottom of the browser window like

Uploading (31%)

when uploading the file, so there must be some way to tap into that number on the client side, or there must be some other way using the controller.

I'd be willing to bet money that Google isn't using HttpPostedFileBase ;-). I'm guessing they're using AJAX? Check out [this link](http://blog.teamtreehouse.com/uploading-files-ajax). — James R., Jun 05 '15 at 20:47
Here's a good one... [Show a progress on multiple file upload Jquery/Ajax](http://stackoverflow.com/questions/23219033/show-a-progress-on-multiple-file-upload-jquery-ajax) — James R., Jun 05 '15 at 20:50
Do you want to report the progress of saveAs or the progress of the file upload? — bmm6o, Jun 05 '15 at 23:36

score 0 · Answer 1 · edited May 23 '17 at 12:30

0

The easiest solution is to do this in the browser, since it obviously knows how much data has been sent. Your controller isn't invoked until the upload is complete, so that won't do it, and even if you had the data on the server side then you have to work out how to get the data back to the browser.

jQuery has some support for this, e.g. File upload progress bar with jQuery

edited May 23 '17 at 12:30

Community

1
1

answered Jun 08 '15 at 15:41

bmm6o

6,187
3
28
55

score 0 · Answer 2 · answered Jun 08 '15 at 15:45

0

You should look into SignalR. We just implemented a progress bar for file uploads in an MVC application and it works great. It's really easy to implement and there are countless tutorials and samples on the web that will show you how to wire it up.

answered Jun 08 '15 at 15:45

ragerory

1,360
1
8
27

Is it possible to have a progress bar on the client side linked to the progress of saveAs()?

2 Answers2