Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ajax.BeginForm in MVC to upload files

I was trying to use an example mentioned here How to do a ASP.NET MVC Ajax form post with multipart/form-data?

But I keep getting "fail" error message box

Index.cshtml

<script src="~/Scripts/jquery-1.8.2.min.js"></script> <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> <h2>Files Upload</h2> <script type="text/javascript"> $(function() {     $("#form0").submit(function(event) {         var dataString;         event.preventDefault();         var action = $("#form0").attr("action");         if ($("#form0").attr("enctype") == "multipart/form-data") {             //this only works in some browsers.             //purpose? to submit files over ajax. because screw iframes.             //also, we need to call .get(0) on the jQuery element to turn it into a regular DOM element so that FormData can use it.             dataString = new FormData($("#form0").get(0));             contentType = false;             processData = false;         } else {             // regular form, do your own thing if you need it         }         $.ajax({             type: "POST",             url: action,             data: dataString,             dataType: "json", //change to your own, else read my note above on enabling the JsonValueProviderFactory in MVC             contentType: contentType,             processData: processData,             success: function(data) {                 //BTW, data is one of the worst names you can make for a variable              },             error: function(jqXHR, textStatus, errorThrown) {                 //do your own thing                 alert("fail");             }         });     }); //end .submit() }); </script> <div id="uploadDiv"> @Html.Action("Files", "Home") </div>  @using (Ajax.BeginForm("Files", "Home", new AjaxOptions { UpdateTargetId = "uploadDiv", HttpMethod = "Post" }, new { enctype = "multipart/form-data", @id="form0"})) { <div>     <div>Upload new file:         <input type="file" name="file" /></div>     <input type="submit" value="Save" /> </div> } <br /> 

Controller

public PartialViewResult Files(HttpPostedFileBase file)     {         IEnumerable<string> files;         if ((file != null) && (file.ContentLength > 0))         {             string fileName = file.FileName;             string saveLocation = @"D:\Files";             string fullFilePath = Path.Combine(saveLocation, fileName);                              try             {                 file.SaveAs(fullFilePath);                 FileInfo fileInfo = new FileInfo(fullFilePath);                 file.InputStream.Read(new byte[fileInfo.Length], 0, file.ContentLength);                                 }             catch (Exception e)             {                 TempData["FileUpload"] = e.Message;                 return PartialView();             }             files = Directory.GetFiles(@"D:\Files\");             return PartialView(files);         }         else         {             files = Directory.GetFiles(@"D:\Files\");             return PartialView(files);         }     } 

Files.cshtml

@model IEnumerable<string>  @foreach (string f in Model) { <p>@f</p> } 

Global.asax

ValueProviderFactories.Factories.Add(new JsonValueProviderFactory()); 
like image 929
Alexander C. Avatar asked Sep 27 '13 03:09

Alexander C.


People also ask

What is Ajax BeginForm in MVC?

Ajax. BeginForm is the extension method of the ASP.NET MVC Ajax helper class, which is used to submit form data to the server without whole page postback. To work Ajax. BeginForm functionality properly, we need to add the reference of jquery.

What is the difference between Ajax BeginForm and HTML BeginForm?

Html. BeginForm() will create a form on the page that submits its values to the server as a synchronous HTTP request, refreshing the entire page in the process. Ajax. BeginForm() creates a form that submits its values using an asynchronous ajax request.


1 Answers

That is complicated better use jquery forms plugin.

Here is the sample:

Html.BeginForm

 @using (Html.BeginForm("YourAction", "YourController")) {     @Html.AntiForgeryToken()     <input type="file" name="files"><br>     <input type="submit" value="Upload File to Server"> } 

Action Method

    [HttpPost]     [ValidateAntiForgeryToken]     public void YourAction(IEnumerable<HttpPostedFileBase> files)     {         if (files != null)         {             foreach (var file in files)             {                 // Verify that the user selected a file                 if (file != null && file.ContentLength > 0)                 {                     // extract only the fielname                     var fileName = Path.GetFileName(file.FileName);                     // TODO: need to define destination                     var path = Path.Combine(Server.MapPath("~/Upload"), fileName);                     file.SaveAs(path);                 }             }         }     } 

Progress Bar

<div class="progress progress-striped">    <div class="progress-bar progress-bar-success">0%</div> </div> 

Jquery & Form script

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> <script src="http://malsup.github.com/jquery.form.js"></script>  <script> (function() {  var bar = $('.progress-bar'); var percent = $('.progress-bar'); var status = $('#status');  $('form').ajaxForm({     beforeSend: function() {         status.empty();         var percentVal = '0%';         bar.width(percentVal)         percent.html(percentVal);     },     uploadProgress: function(event, position, total, percentComplete) {         var percentVal = percentComplete + '%';         bar.width(percentVal)         percent.html(percentVal);     },     success: function() {         var percentVal = '100%';         bar.width(percentVal)         percent.html(percentVal);     },     complete: function(xhr) {         status.html(xhr.responseText);     } });   })();        </script> 

Update...

People who are getting issue of calling action method twice is due to Ajax.BeginForm, just convert it to Html.BeginForm(). For more clarification and to download sample code please refer at this blog.

like image 185
Ashwini Verma Avatar answered Sep 21 '22 05:09

Ashwini Verma