locked
Upload file using ajax call MVC3 RRS feed

  • Question

  • User-1728222991 posted

    I use this html format

    @using (Html.BeginForm("Create", "Image", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        @Html.ValidationSummary(true)
        <fieldset>
            <div class="editor-label">
                @Html.LabelFor(model => model.TagName)
            </div>
            <div class="editor-field">
               @Html.EditorFor(model => model.TagName, "", "tagname")                 
                @Html.ValidationMessageFor(model => model.TagName)
            </div>
    
            <div class="editor-label">
                @Html.LabelFor(model => model.FilePath)
            </div>
            <div class="editor-field">
             <input type="file" name="file" id="file" />
      
            </div>
    
            <div class="editor-label">
                @Html.LabelFor(model => model.ImageSource)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.ImageSource)
                @Html.ValidationMessageFor(model => model.ImageSource)
            </div>
    
            <div class="editor-label">
                @Html.LabelFor(model => model.TotalLicences)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.TotalLicences)
                @Html.ValidationMessageFor(model => model.TotalLicences)
            </div>
    
            <div class="editor-label">
                @Html.LabelFor(model => model.UsedLicences)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.UsedLicences)
                @Html.ValidationMessageFor(model => model.UsedLicences)
            </div>
    
            <p>
                <input type="submit" value="Create" onclick="uploadFile();" />          
                <br />
                 <span id="uploadProgress" style="background-color:yellow;font-size:20;width:200;height:150;visibility:hidden;">Please wait ....</span>
            </p>
    
            
        </fieldset>
    I use this javascript Function
     function uploadFile() {
              alert("Started");
              $("#uploadProgress").show();
              $.ajax({
                  url: "/Image/UploadTest",
                  type: "POST",
                  data: $(this).serialize(),
                  async: false,
                  cache: false,
                  beforeSend: function () {
                      $("#uploadProgress").show()
                  },
                  complete: function () {
                      $("#uploadProgress").html("Upload completed");
                  },
                  success: function (msg) {
    
                      if (msg == "ok")
                          $("#uploadProgress").hide();
                      else
                          alert("Error while uploading");
    
                  }
              });         
          }

    and this is my controller code
     public string UploadTest(HttpPostedFileBase file, ImageTagger.Models.ImageModels.ImageModel imageModel)
     {
    }

    But when i subit the form
    file and imageModel arguments seems to be null
    How can i pass the value of these 2 through ajax call
    Wednesday, January 25, 2012 1:44 AM

Answers

All replies

  • User-1011137159 posted

    for testing purpose remvoe uploadFile function call and check it.

    Wednesday, January 25, 2012 1:49 AM
  • User-1673382244 posted

    Hi try this example....

    public string UploadTest(model m, HttpPostedFileBase file)
     {
    }

    http://www.dustinhorne.com/post/2011/11/16/AJAX-File-Uploads-with-jQuery-and-MVC-3.aspx

    Wednesday, January 25, 2012 2:00 AM
  • User-1728222991 posted

    In that way it works, what i want is to call the uploadFile function using ajax

    Wednesday, January 25, 2012 2:08 AM
  • User-1728222991 posted

    public string UploadTest(model m, HttpPostedFileBase file)

    Changing the order of aruments does'nt make any difference.

    Wednesday, January 25, 2012 2:10 AM
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 25, 2012 2:20 AM
  • User753410315 posted

    Thanks for the links guys. :)  JIBIN - There is a reason that it's null.  For security purposes browsers sandbox file input controls.  You have no direct access to the file data from javascript and therefor you cannot just make an AJAX call to upload the file.  It will post all of the other fields but not the data.

    The way to get around that is to post to a hidden iFrame and retrieve the results back.  You can still post your entire form to that iFrame and react to the data that gets returned, but you cannot just use a standard $.ajax call to upload the file without posting to an iFrame.  Take a look at my my blog article that's been linked and you'll understand how to accomplish it:

    http://www.dustinhorne.com/post/2011/11/16/AJAX-File-Uploads-with-jQuery-and-MVC-3.aspx

    In fairness I also want to give credit to the article that lead me to this solution.  John Rudolf Lewis posted a blog article with the solution.  I modified it to fit my purposes and tried to explain the solution in more detail.  Here is the original:
    http://aspzone.com/tech/jquery-file-upload-in-asp-net-mvc-without-using-flash/

     

    Monday, January 30, 2012 9:38 AM
  • User1980770153 posted

    I’ve been working on the pretty much the similar scenario, so I ended up using this control:

    https://github.com/blueimp/jQuery-File-Upload/wiki   The control is very well documented  and uses the browser AJAX mechanism to post the data when is possible.

    Hope it helps a bit.

    Rado 

    Monday, January 30, 2012 10:16 AM
  • User-1011137159 posted

    In that way it works, what i want is to call the uploadFile function using ajax

    Refer below sample code

    http://aspzone.com/tech/jquery-file-upload-in-asp-net-mvc-without-using-flash/

    Tuesday, January 31, 2012 5:52 AM
  • User367642263 posted
    No.you can't, as far as I remember to upload the file in Ajax without submitting the form, which causes a lot problems on UI - no callback functions, reloading the page, no progress bar. Personally, we used flash - swfupload.
    Tuesday, January 31, 2012 7:23 AM
  • User367642263 posted
    Hm. Using iframe is not good as well. I would suggest to use flash or silverlight plugins. Better - flash :)
    Tuesday, January 31, 2012 7:46 AM
  • User753410315 posted

    Honestly I love Silverlight but I don't see Silverlight or Flash being a good long term technology investment, although Silverlight's 5 support lifecycle runs into 2021.  vladnech - What's the problem with using an iFrame?  While I personally wouldn't use one for content, in this scenario it solves the problem without tethering you to a third party technology (Flash or Silverlight).  It relies on the technology already present in the browser and will be HTML 5 friendly.

    Tuesday, January 31, 2012 11:02 AM
  • User-1883160309 posted

    As it was said you can't upload file via client code becouse of security reasons. The value property of the input type file cannot be set through js code. If it can be then DDOS attacks welcome. 

    Use silverlight or flash component instead - they are well tested and have pretty much functions.

    Tuesday, January 31, 2012 1:08 PM
  • User367642263 posted
    We have to support the project across all range of browsers, starting from IE6 :(. I found iframe does not work properly in IE6 and IE7, because of security restrictions. Another problem with iframe, as I said, I didn't find how assign the callback. An obviously, you can't show the progress bar.
    Tuesday, January 31, 2012 3:58 PM
  • User-1603047950 posted

    http://www.dustinhorne.com/post/2011/11/16/AJAX-File-Uploads-with-jQuery-and-MVC-3.aspx

    using JQuery selectors in your javascript doesn't make your form to make AJAX call to server. You're using Html.BeginForm which is typical form post and it already supports files upload which is not Async ofcourse. 

    Friday, February 22, 2013 9:40 AM
  • User-236386199 posted

    HI, I used jquery.form pluging to acheive the same. Look at this blog "Upload file in MVC via Ajax" for how to use it. FOR HOW TO PASS EXTRA PARAMETER READ THIS BLOG.

    Monday, April 8, 2013 9:24 AM