Monday 16 March 2015

Submit form with file and complex data using ajax mvc web api

 

This is common problem developer faced during development that how to upload file with complex data. I was one of them. So to solve this I searched a lot and but did not get satisfied answer. Then I combined many of answer and solve my problem. I am sharing my code here.

Very first my web api code is as below:

public HttpResponseMessage UploadData()
        {
            try
            {
                //if (HttpContext.Current.Request.Files.AllKeys.Any())
                if (HttpContext.Current.Request.Form.AllKeys.Any())
                {
                    var Title = HttpContext.Current.Request.Form["Title"];
                    var Id = HttpContext.Current.Request.Form["Id"];
                    var H2 = HttpContext.Current.Request.Form["H2"];
                    var H3 = HttpContext.Current.Request.Form["H3"];
                    var P = HttpContext.Current.Request.Form["P"];
                    var pic = new HttpPostedFileWrapper(HttpContext.Current.Request.Files["Picture"]);

                    return Request.CreateResponse(HttpStatusCode.OK, "Successfully uploaded");

                }
                else
                {
                    return Request.CreateErrorResponse(HttpStatusCode.BadRequest, "Please enter information to submit");
                }
            }
            catch (System.Exception ex)
            {
                return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, ex.Message);
            }
        }

 

Now HTML form that we are using to take data:

@model Admin.Models.UploadData

<form id="frmData" name="frmData" method="post" enctype="multipart/form-data" >

@Html.TextBoxFor(model => model.ImageUpload, new { type = "file", id = "ImageUpload", name = "ImageUpload", @class = "default" })

@Html.TextBoxFor(model => model.Title, new { id = "Title", name = "Title", @class = "m-wrap span12" })

@Html.TextBoxFor(model => model.H2, new { id = "H2", name = "H2", @class = "m-wrap span12" })

@Html.TextBoxFor(model => model.H3, new { id = "H3", name = "H3", @class = "m-wrap span12" })

@Html.TextBoxFor(model => model.P, new { id = "P", name = "P", @class = "m-wrap span12" })

<span id="spnError" class="field-validation-error"></span>

<button type="submit" id="btnSubmit" class="btn blue"><i class="icon-ok"></i> Save</button>

</form>

 

Now Its time to call web api from Ajax

 

$('#btnSubmit').click(function (e) {
    e.preventDefault();
    if ($('#ImageUpload').val() == "" && $('#Id').val() == "0") {
        $('#spnError').text("Please select image");
        return false;
    }
    else {
        if ($('#ImageUpload').val() != "") {
            var fileExtension = ['jpeg', 'jpg'];
            if ($.inArray($('#ImageUpload').val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                $('#spnError').text("Only '.jpeg','.jpg' formats are allowed");
                return false;
            }
            else {
                var fsize = $('#ImageUpload')[0].files[0].size;
                if (fsize > 1048576) //do something if file size more than 1 mb (1048576)
                {
                    $('#spnError').text("Max image size limit is 1 MB");
                    return false;
                }
            }
        }
    }
    if ($('#Title').val() == "") {
        $('#spnError').text("Please enter Title");
        return false;
    }

    var data = new FormData();
    var files = $("#ImageUpload").get(0).files;
    if (files.length > 0) {
        data.append("Picture", files[0]);
    }

    data.append("Title", $('#Title').val());
    data.append("Id", $('#Id').val());
    data.append("H2", $('#H2').val());
    data.append("H3", $('#H3').val());
    data.append("P", $('#P').val());

    $(this).html("<i class='icon-refresh'></i> processing");

    $.ajax({
        url: "@Url.Action("UploadData", "api/Webapi")",
        type: "POST",
        processData: false,
        contentType: false,
        data: data,
        success: function (response) {
            //code after success
            $('#btnSubmit').html("<i class='icon-ok'></i> Save");

alert(response);

        },
        error: function (response) {
            $('#btnSubmit').html("<i class='icon-ok'></i> Save");
            if ((JSON.parse(response.responseText).Message).indexOf("login") >= 0) {
                window.location = "@Url.Action("Index","Home")";
            }
            else {
                $('#spnError').text(JSON.parse(response.responseText).Message);
            }
        }
    });

  });

 

That’s it … Enjoy coading…

No comments:

Post a Comment