Ajax FileUpload & JQuery formData in ASP.NET MVC

ajax, asp.net-mvc, c#, file-upload, jquery

Solution

Instead of Jquery Ajax you could use

 <script>
            function SubmitButtonOnclick()
            { 
                var formData= new FormData();
                var imagefile=document.getElementById("imageFile").files[0];
                var coverfile=document.getElementById("coverFile").files[0];
                formData.append("imageFile",imageFile);
                formData.append("coverFile",coverFile);
                var xhr = new XMLHttpRequest();
                xhr.open("POST", "/Profile/EditProfile", true);
                xhr.addEventListener("load", function (evt) { UploadComplete(evt); }, false);
                xhr.addEventListener("error", function (evt) { UploadFailed(evt); }, false);
                xhr.send(formData);

            }

      function UploadComplete(evt) {
        if (evt.target.status == 200) 
                alert("Logo uploaded successfully.");

        else 
                 alert("Error Uploading File");
        }

    function UploadFailed(evt) {
        alert("There was an error attempting to upload the file.");

    }
 </script>

This works for me !!

Your script with changes

 function SubmitButtonOnclick() {
        var formData = new FormData();
        var file = document.getElementById("imageFile").files[0];
        var file1 = document.getElementById("coverFile").files[0];
        formData.append("imageFile", file);
        formData.append("coverfile", file1);
        $.ajax({
            type: "POST",
            url: '@Url.Action("EditProfile","Default1")',
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            success: function (response) {
                $('#GeneralSection').html(response.responseText);
            },
            error: function (error) {
                $('#GeneralSection').html(error.responseText);
            }
        });
    }

Problem

I have some problem with posting `formData` to server side action method. Because ajax call doesn't send files to server, I have to add file uploader data to `formData` manually like this: ``` var formData = new FormData(); formData.append("imageFile", $("#imageFile").file); formData.append("coverFile", $("#coverFile").file); ``` I wrote jQuery function that need to post form data to server using ajax call. It's works but posted `formData` in server side is always null! this is my script: ``` <script> 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); } }); } </script> ``` Edit 1: This is the action method in controller: ``` 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); } } ``` Edit 2: Cshtml view file content: ``` @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" })) { <div> <button id="btnSubmit" type="button" onclick="SubmitButtonOnclick()">Submit</button> </div> <input type="hidden" name="username" id="username" value="@Model.Username"/> <fieldset> <legend>Edit Photos</legend> <div> Select profile picture: <input id="imageFile" type="file" name="imageFile" accept="image/png, image/jpeg" /> @Html.CheckBoxFor(modelItem => modelItem.DefaultCover)<span>Remove profile photo</span> </div> <div> Select cover picture: <input id="coverFile" type="file" name="coverFile" accept="image/png, image/jpeg" /> @Html.CheckBoxFor(modelItem => modelItem.DefaultCover)<span>RemoveCover</span> </div> </fieldset> } ``` Any tips, link or code example would be useful. Thank you in advance!

Original source