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;
}
2 answers
solution1
1 2014-10-17 18:59:58
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;
}
}
}
solution2
0 2014-10-14 07:48:48
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.