ASP.NET Web API Using MVC And HttpClient To Upload And Download Files - Part Eight

Satyaprakash Samantaray
May 21, 2018

184.9k
0
12
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Introduction

Web API is the best fit to create a resource-oriented service using HTTP/Restful and it works well with MVC-based applications. For more details, visit this link.

Web API Details

Description

In this session, I will show you the steps to upload files in the ASP.NET Web API using HttpClient and Download files from the folder in ASP.NET Web API.

Before going through this session, visit my previous sessions,

Steps to be followed.

Step 1

Add an Action to the HomeController (in MVC Client application) for getting the View for upload file.

Code Ref

public ActionResult Part6()
{
return View();
}

Step 2

Add another action for POST action for upload file to web API using HttpClient.

Code Ref

[HttpPost]
public ActionResult Part6(HttpPostedFileBase file)
{
using (var client = new HttpClient())
{
using (var content = new MultipartFormDataContent())
{
byte[] Bytes = new byte[file.InputStream.Length + 1];
file.InputStream.Read(Bytes, 0, Bytes.Length);
var fileContent = new ByteArrayContent(Bytes);
fileContent.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment") { FileName = file.FileName };
content.Add(fileContent);
var requestUri = "http://localhost:47250/api/Upload";
var result = client.PostAsync(requestUri, content).Result;
if (result.StatusCode == System.Net.HttpStatusCode.Created)
{
List<string> m = result.Content.ReadAsAsync<List<string>>().Result;
ViewBag.Success = m.FirstOrDefault();
}
else
{
ViewBag.Failed = "Failed !" + result.Content.ToString();
}
}
}
return View();
}

Code Description

In this section, I have added Web API Url to upload files and download files from it.

var requestUri = "http://localhost:47250/api/Upload";

When developing an ASP.NET Web API controller method that allows downloading a file, it is considered a good practice to set a "Content-Disposition" header to guide a browser of a name of a file being downloaded.

There are two different ways to approach this simple task. First is to add a new HTTP header to the HTTP response using string values for the header's name and value. The second is to try and use the .NET Framework's infrastructure methods that presumably should make this task easier.

The first method seems to be very simple but potentially dangerous: one would need to hard-code string values and be totally responsible for the values to be properly formatted according to the W3C standards.

var fileContent = new ByteArrayContent(Bytes);
fileContent.Headers.Add("Content-Disposition", "attachment; filename=fileName.ext");

The second method is to try and delegate handling of the specifics of the HTTP protocol to the .NET Framework by using corresponding presumably built-in methods. This seems more appropriate and even easier to achieve. However, due to poor documentation of the Web API extensions that is easier said than done. Without further ado this is how it's done:

var fileContent = new ByteArrayContent(Bytes);
fileContent.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment") { FileName = file.FileName };
content.Add(fileContent);

Then if the file in Asp.Net Web API is uploaded successfully then the success message will be shown otherwise a failed message is sent to the end user.

var requestUri = "http://localhost:47250/api/Upload";
var result = client.PostAsync(requestUri, content).Result;
if (result.StatusCode == System.Net.HttpStatusCode.Created)
{
List<string> m = result.Content.ReadAsAsync<List<string>>().Result;
ViewBag.Success = m.FirstOrDefault();
}
else
{
ViewBag.Failed = "Failed !" + result.Content.ToString();
}

Step 3

Add view for the Action & design. Right Click on Action Method (here right click on form action) > Add View... > Enter Name > Add.

Code Ref

@{
ViewBag.Title = "Part6";
}
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button4 {
border-radius: 9px;
}
</style>
<fieldset>
<legend style="font-family:Arial Black;color:blue">Upload And Download Files Here</legend>
<div class="container">
<div>
@if (ViewBag.Success != null)
{
<div class="alert alert-success" role="alert">
<strong>Well done !</strong> Successfully uploaded. <a href="@ViewBag.Success" target="_blank">Download File</a>
</div>
}
else if (ViewBag.Failed != null)
{
<div class="alert alert-error" role="alert">
<strong>Error !</strong> @ViewBag.Failed
</div>
}
</div>
@using (Html.BeginForm("Part6", "Home", FormMethod.Post, new { role = "form", enctype = "multipart/form-data" }))
{
<div class="form-group">
<input type="file" id="file" name="file" class="btn btn-primary" />
</div>
<input type="submit" value="Submit" class="button button4" />
}
</div>
</fieldset>

Code Description

Here in form post method I have added controls as shown beow.

@using (Html.BeginForm("Part6", "Home", FormMethod.Post, new { role = "form", enctype = "multipart/form-data" }))
{
<div class="form-group">
<input type="file" id="file" name="file" class="btn btn-primary" />
</div>
<input type="submit" value="Submit" class="button button4" />
}

In controller section it will check if file has uploaded; if yes then the success message using viewbag is mentioned here.

@if (ViewBag.Success != null)
{
<div class="alert alert-success" role="alert">
<strong>Well done !</strong> Successfully uploaded. <a href="@ViewBag.Success" target="_blank">Download File</a>
</div>
}

In controller section it will check if file has uploaded; if no then the failed message using viewbag is mentioned here.