Databases
StackOverflow2013
Postsdbo
POAjax FileUpload & JQuery formData in ASP.NET MVC
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAjax FileUpload & JQuery formData in ASP.NET MVC
    text
    copied!<p>I have some problem with posting <code>formData</code> to server side action method. Because ajax call doesn't send files to server, I have to add file uploader data to <code>formData</code> manually like this:</p> <pre><code>var formData = new FormData(); formData.append("imageFile", $("#imageFile").file); formData.append("coverFile", $("#coverFile").file); </code></pre> <p>I wrote jQuery function that need to post form data to server using ajax call. It's works but posted <code>formData</code> in server side is always null!</p> <p>this is my script:</p> <pre><code> &lt;script&gt; function SubmitButtonOnclick() { var formData = new FormData(); formData.append("imageFile", $("#imageFile").file); formData.append("coverFile", $("#coverFile").file); $.ajax({ type: "POST", url: '@Url.Action("EditProfile", "Profile")', data: formData, dataType: 'json', contentType: "multipart/form-data", processData: false, success: function (response) { $('#GeneralSection').html(response.responseText); }, error: function (error) { $('#GeneralSection').html(error.responseText); } }); } &lt;/script&gt; </code></pre> <p><strong>Edit 1:</strong> This is the action method in controller:</p> <pre><code> public ActionResult EditProfile(ProfileGeneralDescription editedModel, HttpPostedFileBase imageFile, HttpPostedFileBase coverFile, string postOwnerUser) { try { if (postOwnerUser == User.Identity.Name) { // edit codes... var result = GetProfileGeneralDescription(postOwnerUser); return PartialView("_GeneralProfile", result); } else { var error = new HandleErrorInfo( new Exception("Access Denied!"), "Profile", EditProfile return PartialView("~/Views/Shared/Error.cshtml", error); } } catch (Exception ex) { var error = new HandleErrorInfo(ex, "Profile", EditProfile return PartialView("~/Views/Shared/Error.cshtml", error); } } </code></pre> <p><strong>Edit 2:</strong> Cshtml view file content:</p> <pre><code>@model Website.Models.ViewModel.Profile @using (Ajax.BeginForm("EditProfile", "Profile", new { postOwnerUser = User.Identity.Name }, new AjaxOptions() { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "GeneralSection" }, new { enctype = "multipart/form-data" })) { &lt;div&gt; &lt;button id="btnSubmit" type="button" onclick="SubmitButtonOnclick()"&gt;Submit&lt;/button&gt; &lt;/div&gt; &lt;input type="hidden" name="username" id="username" value="@Model.Username"/&gt; &lt;fieldset&gt; &lt;legend&gt;Edit Photos&lt;/legend&gt; &lt;div&gt; Select profile picture: &lt;input id="imageFile" type="file" name="imageFile" accept="image/png, image/jpeg" /&gt; @Html.CheckBoxFor(modelItem =&gt; modelItem.DefaultCover)&lt;span&gt;Remove profile photo&lt;/span&gt; &lt;/div&gt; &lt;div&gt; Select cover picture: &lt;input id="coverFile" type="file" name="coverFile" accept="image/png, image/jpeg" /&gt; @Html.CheckBoxFor(modelItem =&gt; modelItem.DefaultCover)&lt;span&gt;RemoveCover&lt;/span&gt; &lt;/div&gt; &lt;/fieldset&gt; } </code></pre> <p>Any tips, link or code example would be useful.<br/> Thank you in advance!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload