Upload file using ajax call MVC3 RSS

• • Reply
  

  JIBIN MATHEW

  Member

  61 Points

  55 Posts

  Upload file using ajax call MVC3

  Jan 25, 2012 05:44 AM|LINK

  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

  ajax

• • Reply
  

  amitpatel.it

  Star

  7908 Points

  1856 Posts

  Re: Upload file using ajax call MVC3

  Jan 25, 2012 05:49 AM|LINK

  for testing purpose remvoe uploadFile function call and check it.

  ajax

  My Tech Blogs
  MCPD Enterprise and Web Application
  MCTS Web, Window and Enterprise Application
• • Reply
  

  abiruban

  All-Star

  16002 Points

  2731 Posts

  Re: Upload file using ajax call MVC3

  Jan 25, 2012 06:00 AM|LINK

  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

  ajax

  Please excuse my poor/bad English
  ***DON'T FORGET TO CLICK “MARK AS ANSWER” ON THE POST IF HELPED YOU.
  
• • Reply
  

  JIBIN MATHEW

  Member

  61 Points

  55 Posts

  Re: Upload file using ajax call MVC3

  Jan 25, 2012 06:08 AM|LINK

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

  ajax

• • Reply
  

  JIBIN MATHEW

  Member

  61 Points

  55 Posts

  Re: Upload file using ajax call MVC3

  Jan 25, 2012 06:10 AM|LINK

  abiruban

  public string UploadTest(model m, HttpPostedFileBase file)

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

  ajax

• • Reply
  

  vinay13mar

  Star

  7756 Points

  1626 Posts

  Re: Upload file using ajax call MVC3

  Jan 25, 2012 06:20 AM|LINK

  Hi please check the link

  http://haacked.com/archive/2010/07/16/uploading-files-with-aspnetmvc.aspx

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

  http://slickupload.com/

  Thanks
  V.K.Singh
  
  
  
  • Marked as answer by Young Yang - MSFT on Feb 02, 2012 08:28 AM
• • Reply
  

  dhorne41

  Member

  15 Points

  9 Posts

  Re: Upload file using ajax call MVC3

  Jan 30, 2012 01:38 PM|LINK

  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/

   

  ajax

• • Reply
  

  rado_

  Member

  148 Points

  34 Posts

  Re: Upload file using ajax call MVC3

  Jan 30, 2012 02:16 PM|LINK

  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 

  Rado,
  2*MCTS,MCPD
  ASP.NET MVC Controls
  Follow @RadoslavMinchev
  
• • Reply
  

  amitpatel.it

  Star

  7908 Points

  1856 Posts

  Re: Upload file using ajax call MVC3

  Jan 31, 2012 09:52 AM|LINK

  JIBIN MATHEW

  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/

  My Tech Blogs
  MCPD Enterprise and Web Application
  MCTS Web, Window and Enterprise Application
• • Reply
  

  vladnech

  Member

  175 Points

  78 Posts

  Re: Upload file using ajax call MVC3

  Jan 31, 2012 11:23 AM|LINK

  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.