Geek Answers Handbook

How to get response status when submitting a form in web API

I have an HTML client application and Asp.net WebPI as a server application. I have a script that I have to do by submitting the form and as part of the form Submit I need to submit the form data to the database. This works for me, but as a client application it knows about the successful or unsuccessful status of a DB operation that occurs in another domain. I tried to return the object to the HttpResponseMessageclient, but my entire HTML page rewrote the status that I return from the server. Are there any ways for this to check only one status, and not rewrite all the HTML with the response received from the server API server application so that I have a lot more control in the client application?

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, POST:

[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;
    }
0
2

:

Layout

<!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

@{
    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-
, 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;
        }

    }
}
+1

AJAX, jQuery

AJAX (XHR2) ( )

:

  • btnUpload:
  • fileInputField:

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>

: FormData XMLHttpRequest Level 2. xhr2 - .
IE, IE10+.
IE9-, ( iframe).

(AJAX (XHR2) FormData iframe)
     jQuery jquery.form.js

, :

0

More articles:


All Articles