How to get a Response status while we submit a form to Web API

Question

I am having a client HTML application and an Asp.net WebAPI as the server application. I am having a scenario that I have to make a form submission and as part of Form Submit I need to post the form data to database. This is working for me, but how can the client app knows about the success or Failure status of the DB operation which is happening in a different domain. I have tried to return HttpResponseMessage object to the client but my entire HTML page got rewrite with the status which I am returning from the server. Is there any ways there for this to check a particular status alone rather than rewriting the entire HTML with the response getting from the server API application so that I will have lot more control in the client app?

Client Code for Submitting the Form:

   function ValidateFileAndSubmit() {
        var myForm = $("#form1");
        //UploadFiles();
        var rootServicePath = config.rootURL;
        var path = rootServicePath + 'api/Upload/UploadFile';

        myForm.attr('action', path);
        myForm.submit();

    }

Web Api code where I am access the POST call:

[HttpPost]
    public HttpResponseMessage UploadFile()
    {
        HttpResponseMessage response = null;
        if (HttpContext.Current.Request.Files.AllKeys.Any())
        {
            HttpContext.Current.Response.ContentType = "text/HTML";
            var httpPostedFile = HttpContext.Current.Request.Files["UploadedImage"];

            if (httpPostedFile != null)
            {

                // Validate the uploaded image(optional)

                // Get the complete file path
                var fileSavePath = Path.Combine(HttpContext.Current.Server.MapPath("~/UploadedFiles"), httpPostedFile.FileName);

                // Save the uploaded file to "UploadedFiles" folder
                httpPostedFile.SaveAs(fileSavePath);

                response = new HttpResponseMessage(HttpStatusCode.Created)
                {
                    Content = new StringContent("Uploaded Successfully")
                };
            }
        }
        return response;
    }

can you post sample code for the webAPI and html – mfarouk Oct 14 '14 at 07:44 — mfarouk, Oct 14 '14 at 07:44
I added another answer, have a look! – Koti Panga Oct 17 '14 at 19:01 — Koti Panga, Oct 17 '14 at 19:01

score 1 · Answer 1 · answered Oct 17 '14 at 18:59

Here is the full upload test case:

Layout
For brevity I'm putting only required piece of Markup

<!DOCTYPE html>
<html>
<head>
    <!-- Here you'll have all head child tags(meta, title, CSS related links ref tags and some other like modernizer scripts and other tags that required for app)-->
</head>
<body>
    <!--navbar with Page heading title-->

    <div class="container body-content">
        @RenderBody()
        <!--footer-->
    </div>

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <!--embed other global scripts here-->
    @RenderSection("scripts", false)
</body>
</html>

UploadFilePage.css

    body {
        padding: 30px;
    }

    form {
        display: block;
        margin: 20px auto;
        background: #eee;
        border-radius: 10px;
        padding: 15px;
    }

    .progress {
        position: relative;
        width: 400px;
        border: 1px solid #ddd;
        padding: 1px;
        border-radius: 3px;
    }

    .bar {
        background-color: #B4F5B4;
        width: 0%;
        height: 20px;
        border-radius: 3px;
    }

    .percent {
        position: absolute;
        display: inline-block;
        top: 3px;
        left: 48%;
    }

UploadFile View Markup

@{
    ViewBag.Title = "Upload Demo";
}
<link href="~/Content/UploadFilePage.css" rel="stylesheet" type="text/css" />
<h2>Upload DEMO</h2>

<form action="/api/upload/UploadFile" method="post" enctype="multipart/form-data">
    <input type="file" name="UploadedFile" /><br />
    <input type="submit" value="Upload File to Server" />
</form>
<div class="progress">
    <div class="bar"></div>
    <div class="percent">0%</div>
</div>
<div id="status"></div>
@section scripts   {
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <script>
        (function () {
            var bar = $('.bar'), percent = $('.percent'), 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 (response) {
                    var percentVal = '100%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                    alert(response);//its just for unit testing, pleae remove after your testing. This alert is not required as we are showing status on the page.
                },
                error: function (xhr) {
                    status.html(xhr.responseText || 'Error - File upload failed.');
                },
                complete: function (xhr) {
                    status.html(xhr.responseText);
                }
            });

        })();
    </script>
}

API Controller
To avoid confustion, I applied similar logic you have in the api-controller-action

using System.IO;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web;
using System.Web.Http;

namespace TestCases.MVC.Controllers
{
    public class UploadController : ApiController
    {
        [HttpPost]
        public HttpResponseMessage UploadFile()
        {
            HttpResponseMessage response = null;
            if (HttpContext.Current.Request.Files.AllKeys.Any()) {
                HttpContext.Current.Response.ContentType = "text/HTML";
                var httpPostedFile = HttpContext.Current.Request.Files["UploadedFile"];

                if (httpPostedFile != null) {

                    // Validate the uploaded image(optional)

                    // Get the complete file path
                    var uploadFilesDir = HttpContext.Current.Server.MapPath("~/UploadedFiles");
                    if (!Directory.Exists(uploadFilesDir)) {
                        Directory.CreateDirectory(uploadFilesDir);
                    }
                    var fileSavePath = Path.Combine(uploadFilesDir, httpPostedFile.FileName);

                    // Save the uploaded file to "UploadedFiles" folder
                    httpPostedFile.SaveAs(fileSavePath);

                    response = new HttpResponseMessage(HttpStatusCode.Created) {
                        Content = new StringContent("Uploaded Successfully")
                    };
                }
            }
            return response;
        }

    }
}

score 0 · Answer 2 · edited May 23 '17 at 11:57

FOR YOUR CASE YOU CAN MANAGE WITH AJAX using jQuery

Solution with AJAX(XHR2) FormData feature (Check browser support here)

Assumptions:

btnUpload : id of upload button
fileInputField : id of your file input element

JavaScript:

<script type="text/javascript">
    $(function() {
        $('#btnUpload').click(function() {

            if (window.FormData !== undefined) {

                var formData = new FormData(),
                    yourFileObj = $('#fileInputField').get(0),
                    rootServicePath = config.rootURL,
                    urlPath = rootServicePath + 'api/Upload/UploadFile';

                formData.append("UploadedImage", yourFileObj.files[0]);

                $.ajax({
                    url: urlPath,
                    type: 'POST',
                    data: formData,
                    cache: false,
                    success: function(response) {
                        //do something with response
                    }
                });

            } else {
                alert("your browser sucks!");
            }

        });
    });
</script>

Note: FormData is part of XMLHttpRequest Level 2. Check xhr2 cross browser support here .
If you looking for IE, it support from IE10+.
To support IE9- we should think about fall back approach(upload with iframe).

Solution with fallback (AJAX(XHR2) FormData feature and iframe)
You can use existing open source jQuery plug-in jquery.form.js

Also observe below threads to get idea on server-side:

ASP.Net Article. to get idea on code-behind(server side)
How To Accept a File POST
ASP.NET WEBAPI file upload, issues with IE9

Yes IE9 doesn't support! FormData is part of XMLHttpRequest Level 2. IE supports from its IE-10. Check [xhr2 cross browser support here](http://caniuse.com/#feat=xhr2). — Koti Panga, Oct 15 '14 at 18:13
You can use iframe for IE9 and previous versions. I'll add that code to my answer as well :) — Koti Panga, Oct 15 '14 at 18:20
The same form submission will happen in the IFrame for the fallback approach. I am not getting any return value when i am using the jquery.form plugin. — Jibu P C_Adoor, Oct 17 '14 at 09:53
In next answer, I'm giving my full test case. its working for me. Hope it helps :) — Koti Panga, Oct 17 '14 at 18:34

How to get a Response status while we submit a form to Web API

2 Answers2

Linked