ASP.NET MVC: Simple example of ajax file upload using jQuery

asp.net mvc ajax uploadingHi, in this article I’m going to show how to use jQuery File Upload widget in the ASP.NET MVC application, it will be  just a very simple example. Current functionality was tested in the FireFox, Google Chrome, Safari and IE 7,8,9,10

First of all let’s include all needed .js libraries:

  1. jquery-1.9.1.min.js
  2. jquery-ui-1.9.2min.js
  3. jquery.fileupload.js
  4. jquery.fileupload-ui.js
  5. jquery.iframe-transport.js

On the view you have to add next strings:

1) Model to the top of page:

@model MyModel

2) Java Script for initialization of ajax fileupload

    <script type="text/javascript">

        // jqXHRData needed for grabbing by data object of fileupload scope
        var jqXHRData;

        $(document).ready(function () {

            //Initialization of fileupload
            initSimpleFileUpload();

            //Handler for "Start upload" button 
            $("#hl-start-upload").on('click', function () {
                if (jqXHRData) {
                    jqXHRData.submit();
                }
                return false;
            });
        });

        function initSimpleFileUpload() {
            'use strict';

            $('#fu-my-simple-upload').fileupload({
                url: '/File/UploadFile',
                dataType: 'json',
                add: function (e, data) {
                    jqXHRData = data
                },
                done: function (event, data) {
                    if (data.result.isUploaded) {

                    }
                    else {

                    }
                    alert(data.result.message);
                },
                fail: function (event, data) {
                    if (data.files[0].error) {
                        alert(data.files[0].error);
                    }
                }
            });
        }
    </script>

3) TextBox helper with file type

@Html.TextBoxFor(m => m.MyFile, new { id = "fu-my-simple-upload", type = "file" })

4) Link for starting of downloading

<a href="#" id="hl-start-upload">Start upload</a>

And behind code

5) MyModel.cs

    public class MyModel
    {
        public HttpPostedFileBase MyFile { get; set; }
    }

6) UploadFile action in the ImageController

       [HttpPost]
        public virtual ActionResult UploadFile()
        {
            HttpPostedFileBase myFile = Request.Files["MyFile"];
            bool isUploaded = false;
            string message = "File upload failed";

            if (myFile != null && myFile.ContentLength != 0)
            {
                string pathForSaving = Server.MapPath("~/Uploads");
                if (this.CreateFolderIfNeeded(pathForSaving))
                {
                    try
                    {
                        myFile.SaveAs(Path.Combine(pathForSaving, myFile.FileName));
                        isUploaded = true;
                        message = "File uploaded successfully!";
                    }
                    catch (Exception ex)
                    {
                        message = string.Format("File upload failed: {0}", ex.Message);
                    }
                }
            }
            return Json(new { isUploaded = isUploaded, message = message }, "text/html");
        }

7) Private CreateFolder method

        /// <summary>
        /// Creates the folder if needed.
        /// </summary>
        /// <param name="path">The path.</param>
        /// <returns></returns>
        private bool CreateFolderIfNeeded(string path)
        {
            bool result = true;
            if (!Directory.Exists(path))
            {
                try
                {
                    Directory.CreateDirectory(path);
                }
                catch (Exception)
                {
                    /*TODO: You must process this exception.*/
                    result = false;
                }
            }
            return result;
        }

8) And don’t forget to add in the web.config maxRequestLength to set the maximum request size to allow uploading of file with needed sizes.

  <system.web>
    <!--102400 Kb = 100 MB-->
    <httpRuntime maxRequestLength="102400" />   
  </system.web>

For instance, if you would like to send additional data with file, just wrap your file input by form tag like this:

<form>
   <input type="text" name="FileName" />
   <div>@Html.TextBoxFor(m => m.MyFile, new { id = "fu-my-simple-upload", type = "file" })  <a href="#" id="hl-start-upload">Start upload</a> </div>
</form>

To the demo solution I’ve added 3 examples:

  • Ajax upload by click
  • Auto Upload
  • Upload with checking size and file type

And a couple of clarifications:

Reading file on the client side

In the demo, which I attached at the end of the article, there is example with the checking of size of uploading file, this does not work for IE7-9, only for IE 10. In the javascript you can read files using FIleReader object.

var reader = new FileReader();

In the IE you can use ActiveXObject object:

var fileSystemObject = new ActiveXObject("Scripting.FileSystemObject");

but be careful, IE blocks creating of this object due to browser security.

Why after file selection, filename is not displayed in the “Browse” text box?

There is workaround, as you noticed, on the DEMO page of the plugin, there are no controls like this:

you can see only fancy buttons like this:

fancy buttons

so, “Add files” one, is nothing more than our input type=”file” “colored” by CSS and HTML.

jQuery File Upload Demo

And if you wish to have “Browse” button with text box where you can see selected file, you simply can add input type=”text” with readonly=”readonly” to the left side from “Browse” button and write file name by manually by using jQuery.

It will look like this:

ASP.NET MVC: Simple example of ajax file upload using jQuery

 

DEMOTestAjaxUpload.rar (Visual Studio 2012)

DEMO 2: Workaround of how to fix issue when you select file and name of selected one does not appear in the file text box : TestAjaxUpload_2.rar (Visual Studio 2013)

Have a good coding!

  • Cihan

    thanks great sample . you save other examples is so complex.

    • Sergey Boiko

      you are welcome :)

  • Dixon Epperson

    Website address is not material to my question.

    When I comment out the initfileUpload code block, then click on the Browse button, the name of the file I want to upload remains in the text box. When I uncomment it, and click on the browse, the textbox remains empty, though there is data. Is there a cure for that?

    here is the html:
    @Html.TextBoxFor(model => model.CoLogo, new { id = "edtAddrLogoUpload", type = "file" })

    here is the initialization:

    function initfileUpload(_msgcallback) {
    'use strict';
    $("#edtAddrLogoUpload").fileupload({
    url: "Subscriber/FileUpload",
    dataType: 'json',
    add: function (e, data) {
    jqFUploadData = data;
    setTimeout("repopulateFileUpload('"+data.files[0].name+"')", 100);
    },
    done: function (event, data) {
    if (data.result.isUploaded) {
    editAddrProcessRslt("Completed")
    }
    else {
    editAddrProcessRslt(data.result.message)
    }
    },
    fail: function (event, data) {
    if (data.files[0].error) {
    editAddrProcessRslt(data.files[0].error)
    }
    }
    });
    }

    • Sergey Boiko

      Hi Dixon, good one, this is also interesting question for me, if you will find something about it, please, let me know.

  • http://powerdotnetcore.com/asp-net-mvc/asp-net-mvc-simple-ajax-file-upload-using-jquery Ayesha Isaac

    Hi Sergey,

    Can you tell me how I use the above sample for non image files for e.g. csv or text?

    Thanks,
    Ayesha

    • http://powerdotnetcore.com Sergey Boiko

      Hi Ayesha,

      Sorry for my delay, you can upload all files of all types, use init like this:

      $(function () {
      ‘use strict';

      // Initialize the jQuery File Upload widget:
      $(‘#fu-my-file’).fileupload();

      $(‘#fu-my-file’).fileupload(‘option’, {
      autoUpload: true,
      url: ‘/Upload/UploadMyFile’,
      dataType: ‘json’,
      //maxFileSize: 2000000, // Size in Bytes – 2 MB
      add: function (e, data) {
      var goUpload = true;
      var uploadFile = data.files[0];

      if (!(/\.(gif|jpg|jpeg|tiff|png|csv)$/i).test(uploadFile.name)) {
      alert(‘Wrong type’);
      goUpload = false;
      } else if (uploadFile.size > 2000000) { // 2mb
      alert(‘Please upload a smaller file, max size is 2 MB’);
      goUpload = false;
      }

      if (goUpload == true) {
      showLoader();
      var jqXHR = data.submit()
      .success(function (result, textStatus, jqXHR) {

      if (result.isValid) {

      }
      else {

      }
      })
      .error(function (jqXHR, textStatus, errorThrown) {
      if (typeof (jqXHR) != ‘undefined’ || typeof (textStatus) != ‘undefined’ || typeof (errorThrown) != ‘undefined’) {
      alert(textStatus + errorThrown + jqXHR);
      }
      });
      }
      },
      fail: function (event, data) {
      if (data.files[0].error) {
      alert(data.files[0].error);
      }
      }
      });
      });

  • Md.Rajib ul Hasan

    This code runs fine in firefox but does not run in IE 8 what can i do ? please help.

  • Javier

    It worked for me on IE 8, no extra configuration was necessary

    • http://powerdotnetcore.com Sergey Boiko

      yep, agree…

  • Rohit Kesharwani

    thanks for your nice and helpfull article.

  • Martin

    I have a problem with the file names being shown in the textbox. I can select a file but the text in the textbox is not updated with the filename it remains unchanged. The upload does contain the correct file, though.
    Any help would be appreciated.

  • Cesar

    Does this works if you add the ValidateAntiforgeryToken attribute to the POST action?
    I tried other plugins and you needed to do a lot of workarounds to be able to get the AntiforgeryToken sent through the multipart/form-data ajax form submission…

  • Nelson

    Hi, i have this error:

    Server Error in ‘/ ajax-upload’ application.
    Error Analyzer
    Description: Error parsing a resource required to service this request. Please review the specific error details and modify the analysis of source code appropriately.

    Parser Error Message: Could not load type ‘TestAjaxUpload.MvcApplication’.

    Source Error:

    Line 1:

    Source File: / ajax-upload/global.asax Line: 1

    Version Information: Microsoft NET Framework Version:. 4.0.30319; ASP.NET Version: 4.0.30319.18446

    Why does it happen?

    • http://powerdotnetcore.com Sergey Boiko

      Hi Nelson,

      it looks like you are trying to open project in the Visual Studio less than 2012 or you just did not install MVC4 framework.

  • Ali

    Hi, I want to add some form data with file as well. Is this possible to add data with this Jquery plugin, if it’s possible then how can we access this on controller side?
    Any help will be appreciated.
    thanks.

    • http://powerdotnetcore.com Sergey Boiko

      Hi Ali,

      Yes, you can use formData parameter

      like this:

      $(‘#fu-my-simple-upload-with-size’).fileupload({
      url: ‘/File/UploadFile’,
      dataType: ‘json’,
      formData: myForm,
      add: function (e, data) {
      jqXHRData = data;

      },
      done: function (event, data) {
      if (data.result.isUploaded) {

      } else {

      }
      alert(data.result.message);
      },
      fail: function (event, data) {
      if (data.files[0].error) {
      alert(data.files[0].error);
      }
      }
      });

      and you will be able to get it on the controller like this

      Request.Form[“myKey”]

  • D.

    Greate example!

  • Munish Sharma

    When i am uploading the file using uploader, file name is not shown. Please give me an idea, how i can shown uploaded file, as it only show No File Selected

    • http://powerdotnetcore.com Sergey Boiko

      Hi Munish,

      yes, i faced the same issue… i did not investigate this one… probably you need write file name by manually to the upload input etc.

  • Rohan Jain

    This is exactly what I was looking for dude. Thanks.

    Question though if you faced this:

    I am getting access denied issues on the submit() call. I know this happens because IE9 doesn’t allow submit to be programmatically triggered with a file control in place.

    But I don’t face the same problem if I run your code. Is their a config setting that you used?

    • http://powerdotnetcore.com/ Sergey Boiko

      Hi Rohan, you are welcome!

      I did not make some additional settings in the configs etc. Only those that I provided in this article. You can simple download my example and take a look.

      Sorry, but I did not face with this issue that you described, but if you will find out why it happens, please, let me know.

  • Its Me

    Good Work

  • Bala

    Thanks dude, It is really helpful for me.

    But I am facing certain issues like after file selection, file name is not displayed in the Browse text box. and i could not handle the return statement from the controller.

    • http://powerdotnetcore.com/ Sergey Boiko

      Hi Bala,

      Please, see my updated article at the end, hope this help.

      P.S. A little bit later I will add another demo project with example where path of selected file is displayed.

  • testJquery

    Hi, I am trying to delegate the BtnUpload function to a browse button it works fine with IE9 but fails in IE8 can somebody please help me.

    $(“#btnBrowse”).click(function () {
    $(“#fu-my-simple-upload”).trigger(“click”);
    });

    • http://powerdotnetcore.com Sergey Boiko

      HI,

      try like this:

      $(“#btnBrowse”).click(function () {
      $(“#fu-my-simple-upload”).click();
      });

      or better:

      $(“#btnBrowse”).on(“click”, function () {
      $(“#fu-my-simple-upload”).click();
      });

      • testJquery

        Thanks Sergey for your prompt reply. I have done the same thing but cant get it to work for IE 8. all the other browsers are working fine.

        • http://powerdotnetcore.com Sergey Boiko

          Hi,

          Do you have some errors in the IE debug console?
          Probably some security settings in the IE has blocked uploading..

          It’s difficult to figure out without code..
          But anyway this example was tested even in the IE7 and it must work in the IE8.

          • testJquery

            Hi,

            Unfortunately there are no errors in the Console ( i wished there were some).

            This is the code that i have and i do agree this works on IE 8 when i use the above example in my environment and it works like a charm.

            Only when i add my code it cannot make the Ajax call.

            — Javascript

            $(“#btnBrowse”).click(function () {

            $(“#fileUpload”).click();

            });

            $(“#btnUpload”).on(‘click’, function () {

            if (jqXHRData) {

            jqXHRData.submit();

            }

            return false;

            });

      • testJquery

        Just to add to my question. I am able to mimic the event however clicking the handler does not make ajaxCall that is where its failing. Sorry if my question was wrongly drafted.
        Thanks in Advance

  • Cronos

    Does this work with newer versions of Jquery and jquery-ui? I tested it by upgrading both libraries and it fails. Please advise

  • Andreas Klumpe

    Hi, how i can implement the progressbar?

  • Andreas Klumpe

    Hi, how i can implement the progressbar?

  • Murali Mhn

    Hi,
    This upload plugin not showing uploaded file name but upload is done what is the problem

    • http://powerdotnetcore.com Sergey Boiko

      Hi,

      I described this problem at the end of this article.

  • Gilles

    Hello, great tutorial, thanks !!!
    I’m having an issue with the drag and drop files.
    On the same page, I have 4 blocs, each displaying a list of document.
    When I upload a file in one of the box using the select file button, it works fine.
    But when I drop a file on the page, it triggers the 4 upload and the file get added in each bloc.
    How can I limit the drop zone to a single box ?

    Thanks for your help

  • Anil Kushaba

    Great Tutoral,Thanks !!!

  • Andrés García

    Hi, How to pass a parameter or a modelview to controller? Thanks