Create registration form with file upload(image) send from ajax to server side (C#)

Question

I used ajax request and included upload file(image) inside the form..

Here is my code:

HTML:

@model acgs_qm.Models.StudentsData

@using (Html.BeginForm("RegisterStudent", "Admin", FormMethod.Post, new { id = "frmrs", enctype = "multipart/form-data" })){
<div id="ruCont">
     <div class="first-inline">
         <input type="file" id="si_image" name="si_image" accept="image/*" />
         <div id="imgHolder"></div>
     </div>
     <div class="second-inline">
         <span>Student ID:</span>
         @Html.TextBoxFor(a => a.si_id, new { @class = "user-id-input"})
     </div>
     <div>
     <span>Student Information</span>
     <span class="field-name">Full Name:</span>
     @Html.TextBoxFor(a => a.si_lname, new { @autocomplete = "off", @placeholder = "Last Name" })
     @Html.TextBoxFor(a => a.si_fname, new { @autocomplete = "off", @placeholder = "First Name" })
     @Html.TextBoxFor(a => a.si_mname, new { @autocomplete = "off", @placeholder = "Middle Name" })
     </div>
     <button class="ru-button" form="frmrs">Register Student</button>
</div>
}

JS:

$(document).on("submit", "#frmrs", function (e) {
    e.preventDefault();
    frm = $(this);
    formValidation();
    formData = new FormData();
    file = document.getElementById("si_image").files[0];
    formData.append("si_image", file);

    if ($(this).valid()) {
        $.ajax({
            url: '/admin/registerstudent',
            type: 'POST',
            data: frm.serialize() + '& si_image=' + formData,
            processData: false,
            contentType: false,
            success: function () {
                $.ajax({
                    url: '/admin/createstudent',
                    type: 'GET',
                    success: function () {
                        alert('Success!')
                    },
                    error: function () {
                        alert('Something went wrong.')
                    }
                });
            },
            error: function () {
                alert('Something went wrong!');
            }
        });
    }
});

Server Side(C#):

[HttpPost]
    public ActionResult RegisterStudent(StudentsData sd, HttpPostedFileBase si_image)
    {

         _ActionModels ma = new _ActionModels();

        if (si_image != null)
        {
            var versions = new Dictionary<string, string>();

            var path = Server.MapPath("~/Content/profile-pic/");

            versions.Add("_small", "maxwidth=500&maxheight=500&format=jpg");

            foreach (var suffix in versions.Keys)
            {
                si_image.InputStream.Seek(0, SeekOrigin.Begin);

                ImageBuilder.Current.Build(
                    new ImageJob(
                        si_image.InputStream,
                        path + si_image.FileName + suffix,
                        new Instructions(versions[suffix]),
                        false,
                        true));
            }
        }

        ma.InsertStudentInfo(sd);

        return RedirectToAction("CreateStudent");
    }

The problem is that the formdata is returning a null to the controller using the HttpPostedFileBase, I don't know why it returns a null value.

Your response would be very much appreciated, thank you in advance.

score 0 · Answer 1 · answered Feb 17 '16 at 16:01

Ajax send an object you will need to do somthing like this first

var Data = { Data: frm.serialize() + '& si_image=' + formData }
$.ajax({
        url: '/admin/registerstudent',
        type: 'POST',
        data: Data,
        processData: false,
        contentType: false,
        success: function () {
            $.ajax({
                url: '/admin/createstudent',
                type: 'GET',
                success: function () {
                    alert('Success!')
                },
                error: function () {
                    alert('Something went wrong.')
                }
            });
        },
        error: function () {
            alert('Something went wrong!');
        }
    });

Create registration form with file upload(image) send from ajax to server side (C#)

1 Answers1