Download the source code

You can always download the source code here: Upload Files To Azure Media Service

Background

For the past few weeks I am working in Azure . Recently I got a requirement of storing images to Azure. Thus I decided to create a media service account for this requirement. I hope you have already saw my previous articles related to Media Services, if not please find those from here: Media Service.

Now I assume that you have a little background of below items.

Shall we start now?

Prerequisites

If you are a start up company or you are in thinking to start a one, you can always go for BizSpark(Software and services made for the start ups), to join please check here: How to join bizspark. Or you can always create a free account here.

Things we are going to do

The following are the tasks we are going to do.

Now we will go and create a MVC application.

Create a MVC application

Click on the File->New->Project and name your project, in the upcoming window please select MVC and create your project. Once your project is loaded, you can create a MVC controller as follows.

[csharp]
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
[/csharp]

And create a view as follows.

[html]
@{
ViewBag.Title = "Home Page";
}

<div class="jumbotron">
<h1>Sibeesh Venu</h1>
<p class="lead">Welcome to Sibeesh Passion’s Azure Media Service Library</p>
<p><a href="http://sibeeshpassion.com" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>
[/html]

Now we need to create an another action in the controller and view for upload. Shall we?

[csharp]
public ActionResult Upload()
{
return View();
}
[/csharp]

And create a view as follows.

[html]
@{
ViewBag.Title = "Upload";
}

<h2>Upload</h2>
<style>
table, td, tr {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 10px;
}

span {
padding: 10px;
margin: 10px;
}
</style>
<input name="myFile" id="myFile" type="file" multiple /><br/>
<input type="button" value="Submit" id="btnSubmit" class="btn btn-info" />
<div id="fiesInfo"></div>
<div id="divOutput"></div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/Upload.js"></script>
[/html]

Here Upload.js is the file where our client side codes relies. So shall we create the client side functions related to the upload process?

[js]
$(‘#btnSubmit’).click(function () {
$(‘#fiesInfo’).html(”);
$(‘#divOutput’).html(”);
startDateTime = new Date();
$(‘#fiesInfo’).append(‘<br/><br/><span><b>Uploading starts at</b></span>’ + startDateTime);
var data = new FormData();
var files = $("#myFile").get(0).files;
if (files.length > 0) {
for (var i = 0; i < files.length; i++) {
data.append("UploadedImage_" + i, files[i]);
}
var ajaxRequest = $.ajax({
type: "POST",
url: "http://localhost:5022/Home/UploadFile",
contentType: false,
processData: false,
data: data,
cache: false,
success: function (data, status) {
debugger;
var totSize = 0;
$(‘#divOutput’).hide();
$(‘#fiesInfo’).append(‘<table></table>’);
for (var i = 0; i < data.length; i++) {
totSize = totSize + parseFloat(data[i].ImageSize);
$(‘#divOutput’).append(‘<img style="float: left;padding:10px;margin:5px;" src=https://’ + mediaServiceAccount + ‘.blob.core.windows.net/’ + data[i].AssetID + ‘/’ + data[i].Title + ‘ />’);
}
$(‘#fiesInfo table’).append(‘<tr><td><b>No of files uploaded: </b></td><td>’ + data.length + ‘</td></tr>’);
$(‘#fiesInfo table’).append(‘<tr><td><b>Total size uploaded: </b></td><td>’ + formatSizeUnits(totSize) + ‘</td></tr>’);
var endDateTime = new Date();
$(‘#fiesInfo table’).append(‘<tr><td><b>Uploading ends at </b></td><td>’ + endDateTime + ‘</td></tr>’);
$(‘#fiesInfo table’).append(‘<tr><td><b>The time taken is </b></td><td>’ + findDateDiff(startDateTime, endDateTime) + ‘ </td></tr>’);
$(‘#divOutput’).show();
},
error: function (xhr, desc, err) {
$(‘#divOutput’).html(‘Error: ‘ + err);
}
});
}

});
[/js]

findDateDiff(date1, date2)

[js]
function findDateDiff(date1, date2) {
//Get 1 day in milliseconds
var one_day = 1000 * 60 * 60 * 24;

// Convert both dates to milliseconds
var date1_ms = date1.getTime();
var date2_ms = date2.getTime();

// Calculate the difference in milliseconds
var difference_ms = date2_ms – date1_ms;
//take out milliseconds
difference_ms = difference_ms / 1000;
var seconds = Math.floor(difference_ms % 60);
difference_ms = difference_ms / 60;
var minutes = Math.floor(difference_ms % 60);
difference_ms = difference_ms / 60;

//var hours = Math.floor(difference_ms % 24);
//var days = Math.floor(difference_ms / 24);

return minutes + ‘ minute (s), and ‘ + seconds + ‘ second (s)’;
};
[/js]

formatSizeUnits(bytes)

[js]
function formatSizeUnits(bytes) {
if (bytes >= 1000000000) { bytes = (bytes / 1000000000).toFixed(2) + ‘ GB’; }
else if (bytes >= 1000000) { bytes = (bytes / 1000000).toFixed(2) + ‘ MB’; }
else if (bytes >= 1000) { bytes = (bytes / 1000).toFixed(2) + ‘ KB’; }
else if (bytes > 1) { bytes = bytes + ‘ bytes’; }
else if (bytes == 1) { bytes = bytes + ‘ byte’; }
else { bytes = ‘0 byte’; }
return bytes;
}
[/js]

As you can see in the AJAX call we have set URL as http://localhost:5022/Home/UploadFile so we need to create a JsonResult/ActionResult in our Home controller right? I will create an asynchronous JsonResult action there.

[csharp]
#region UploadImages
/// <summary>
/// Upload images to the cloud and database. User can upload a single image or a collection of images.
/// </summary>
[HttpPost]
public async Task<JsonResult> UploadFile()
{
try
{
List<ImageLists> prcssdImgLists = null;
if (HttpContext.Request.Files.AllKeys.Any())
{
var httpPostedFile = HttpContext.Request.Files;
if (httpPostedFile != null)
{
string result = string.Empty;
string returnJson = string.Empty;
using (var ah = new AzureHelper())
{
List<Stream> strmLists = new List<Stream>();
List<string> lstContntTypes = new List<string>();
for (int i = 0; i < httpPostedFile.Count; i++)
{
strmLists.Add(httpPostedFile[i].InputStream);
lstContntTypes.Add(httpPostedFile[i].ContentType);
}
prcssdImgLists = await ah.UploadImages(strmLists, lstContntTypes);
}

}
}
return Json(prcssdImgLists, JsonRequestBehavior.AllowGet);
}
catch (Exception)
{
throw;
}
}
#endregion
[/csharp]

There we are getting the uploaded files from HttpContext.Request.Files. Did you notice that we are returning the data as collection of the class ImageLists? Where is our ImageLists class then?

[csharp]
using System;
using System.IO;

namespace WorkingWithImagesAndAzure.Models
{
/// <summary>
/// Image Collection, describes the properties of the image uploaded
/// </summary>
public class ImageLists
{
#region Private Collections
private Guid _imageID = Guid.Empty;
private string _imageTitle = string.Empty;
private string _imageData = string.Empty;
private string _assetID = string.Empty;
private long _imageSize = 0;
#endregion

#region Public Properties
/// <summary>
/// The GUID of image
/// </summary>
public Guid ImageID
{
get
{
return _imageID;
}
set
{
if (value != Guid.Empty && value != _imageID)
{
_imageID = value;
}
}
}
/// <summary>
/// The name of the image, a string value
/// </summary>
public string Title
{
get
{
return _imageTitle;
}
set
{
if (value != string.Empty && value != _imageTitle)
_imageTitle = value;
}
}
/// <summary>
/// AssetID
/// </summary>
public string AssetID
{
get
{
return _assetID;
}
set
{
if (value != string.Empty && value != _assetID)
_assetID = value;
}
}
/// <summary>
/// The filesteam of the single image uploaded
/// </summary>
public string ImageData
{
get
{
return _imageData;
}
set
{
if (value != null && value != _imageData)
_imageData = value;
}
}
/// <summary>
/// ImageSize
/// </summary>
public long ImageSize
{
get
{
return _imageSize;
}
set
{
if (value != 0 && value != _imageSize)
_imageSize = value;
}
}
#endregion

}
}
[/csharp]

Yes you are right, we need to create an another class too, AzureHelper.

[csharp]
public class AzureHelper : IDisposable
{
void IDisposable.Dispose()
{

}
}
[/csharp]

Here we will start all of our codes related to media service account. Before going further, please install Microsoft.WindowsAzure.Storage from NuGet package manager. And add the following references.

[csharp]
using ImageResizer;
using Microsoft.WindowsAzure.MediaServices.Client;
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Blob;
using System;
using System.Collections.Generic;
using System.Configuration;
using System.IO;
using System.Threading.Tasks;
[/csharp]

You must add ImageResizer.dll to your references before you start using ImageResizer, you can get the DLL file from the source code attached.

Next, we will configure our Web.config with the keys and connection strings we needed. When I said, keys, it includes your media service account keys too, if you don’t know your media service account keys, please login to your azure portal and get it by selecting your media service account. We will be adding the following keys, please replace the information with yours.

[xml]
<appSettings>
<add key="webpages:Version" value="3.0.0.0" />
<add key="webpages:Enabled" value="false" />
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
<add key="imgRszeWdth" value="120" />
<add key="imgRszeHgth" value="120" />
<add key="myAzureStorageCon" value="UseDevelopmentStorage=true;" />
<add key="MediaServicesAccountName" value="" />
<add key="MediaServicesAccountKey" value="" />
<add key="myAzureStorageConSetting" value="" />
</appSettings>
[/xml]

Now we can set our connection strings of both storage account and media service account.

[xml]
<add name="myAzureStorageCon" connectionString="DefaultEndpointsProtocol=https;AccountName=youraccountname;AccountKey=youraccountkey" />
<add name="MediaStorage" connectionString="DefaultEndpointsProtocol=https;AccountName=youraccountname;AccountKey=youraccountkey" />
[/xml]

I hope you have set everything. Now we can create the functions and constants we need in our AzureHelper class. Are you ready?

[csharp]
#region Constants
private static readonly string imgRszeWdth = ConfigurationManager.AppSettings["imgRszeWdth"];
private static readonly string imgRszeHgth = ConfigurationManager.AppSettings["imgRszeHgth"];
private static readonly string mediaServicesAccountName = ConfigurationManager.AppSettings["MediaServicesAccountName"];
private static readonly string mediaServicesAccountKey = ConfigurationManager.AppSettings["MediaServicesAccountKey"];
private static readonly string myAzureStorageConSetting = ConfigurationManager.AppSettings["myAzureStorageConSetting"];
private static readonly string myAzureCon = ConfigurationManager.ConnectionStrings["MediaStorage"].ConnectionString;
#endregion
[/csharp]

And we need to create a function named UploadImages, this is the one we are calling from our controller.

[csharp]
#region Public Methods
public async Task<List<ImageLists>> UploadImages(List<Stream> strmLists, List<string> lstContntTypes)
{
string myContainerName = "Test007";
string assetID = CreateBLOBContainer(myContainerName);
assetID = assetID.Replace("nb:cid:UUID:", "asset-");
List<ImageLists> retCollection = new List<ImageLists>();
CloudStorageAccount storageAccount = CloudStorageAccount.Parse(myAzureStorageConSetting);
CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
CloudBlobContainer container = blobClient.GetContainerReference(assetID);
container.SetPermissions(
new BlobContainerPermissions { PublicAccess = BlobContainerPublicAccessType.Blob });

if (strmLists != null)
{
for (int i = 0; i < strmLists.Count; i++)
{
string strExtension = string.Empty;
if (lstContntTypes[i] == "image/gif")
{
strExtension = ".gif";
}
else if (lstContntTypes[i] == "image/jpeg")
{
strExtension = ".jpeg";
}
else if (lstContntTypes[i] == "image/jpg")
{
strExtension = ".jpg";
}
else if (lstContntTypes[i] == "image/png")
{
strExtension = ".png";
}
ImageLists img = new ImageLists();
string imgGUID = Guid.NewGuid().ToString();
CloudBlockBlob blockBlob = container.GetBlockBlobReference(string.Concat(imgGUID, strExtension));
await blockBlob.UploadFromStreamAsync(strmLists[i]);

img.ImageID = new Guid(imgGUID);
img.Title = string.Concat(imgGUID, strExtension);
img.ImageSize = strmLists[i].Length;
img.AssetID = assetID;
retCollection.Add(img);

CloudBlockBlob blockblobthumb = container.GetBlockBlobReference(string.Concat(imgGUID, "_thumb", strExtension));
Stream strmThumb = ResizeImage(strmLists[i]);
using (strmThumb)
{
await blockblobthumb.UploadFromStreamAsync(strmThumb);

img = new ImageLists();
img.ImageID = new Guid(imgGUID);
img.Title = string.Concat(imgGUID, "_thumb", strExtension);
img.ImageSize = strmThumb.Length;
img.AssetID = assetID;
retCollection.Add(img);
}
}

}
return retCollection;
}
#endregion
[/csharp]

As you can see we are creating the asset as CreateBLOBContainer(myContainerName). So shall we see the function now?

[csharp]
private string CreateBLOBContainer(string containerName)
{
try
{
string result = string.Empty;
CloudMediaContext mediaContext;
mediaContext = new CloudMediaContext(mediaServicesAccountName, mediaServicesAccountKey);
IAsset asset = mediaContext.Assets.Create(containerName, AssetCreationOptions.None);
return asset.Id;
}
catch (Exception)
{
throw;
}
}
[/csharp]

That’s fantastic, we just created an asset in our media service account. And this is the code await blockBlob.UploadFromStreamAsync(strmLists[i]); which does the uploading. Once the actual image is uploaded we are passing the stream to a function ResizeImage(strmLists[i]) which will return the converted stream.

[csharp]
private static MemoryStream ResizeImage(Stream downloaded)
{
var memoryStream = new MemoryStream();
var settings = string.Format("mode=crop&width={0}&height={1}", Convert.ToInt32(imgRszeWdth), Convert.ToInt32(imgRszeHgth));
downloaded.Seek(0, SeekOrigin.Begin);
var i = new ImageJob(downloaded, memoryStream, new Instructions(settings));
i.Build();
memoryStream.Position = 0;
return memoryStream;
}
[/csharp]

Once we finished uploading we are creating an output as follows.

[csharp]
ImageLists img = new ImageLists();
img.ImageID = new Guid(imgGUID);
img.Title = string.Concat(imgGUID, strExtension);
img.ImageSize = strmLists[i].Length;
img.AssetID = assetID;
retCollection.Add(img);
[/csharp]

All good? Build your application and run!. Can you see outputs as below?

Upload Images To Azure Media Service Home Page

Click on the link Upload Images, you can see the Upload view now.

Upload Images To Azure Media Service Upload View

Now select the files and click on Submit.

Upload Images To Azure Media Service Output

You can select as many files as you wish.

Upload Images To Azure Media Service Output Multiple

So we have uploaded both thumbnail and actual image. That’s cool. I guess we have done for now. Have a happy coding!.

Conclusion

Did I miss anything that you may think which is needed? Have you ever tried Azure media service account? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Download the source code

You can always download the source code here:

Background

As you are aware most websites accepts only .zip or any other zipped formats, this is for ensuring that only less amount of data is being uploaded to the server. We can reduce almost 60 percentage of the size if we zipped the same. Now the problem is, how you can validate any zipped item which is uploaded to your site? How can you check for any particular file in that zipped item? For example if you need to find out any files with extension of .sql, .ico or .txt? What if you want to intimate user that the uploaded items does not have any particular file that must be needed? You need to loop through the contents available in it right? This is what we are going to discuss in this post. I had a situation of uploading my old back ups of my personal website (http://sibeeshpassion.com/) and after uploading I wanted to check whether the uploaded .zip file has .ico file in it. The process we are going to do is listed below.

Using the code

Now we will move into the coding part. I hope your MVC application is ready for action 🙂 with all the needed packages.

Create a controller

Now we will create a controller, view with an action in it as follows.

[csharp]
public ActionResult Index()
{
return View();
}
[/csharp]

Update the view

Now in the view, we will add a file upload and other needed elements.

[html]
<input type="file" name="FileUpload1" id="fileUpload" placeholder="Please select the file" /><br />
<input id="btnUploadFile" type="button" value="Upload File" />
<div id="message"></div>
[/html]

Add the JS references

Add the references as follows.

[html]
<script src="~/scripts/jquery-1.10.2.min.js"></script>
<script src="~/scripts/MyScript.js"></script>
[/html]

Here MyScript.js is where we are going to write some scripts.

Style the elements (Optional)

You can style your view as follows. This step is absolutely optional, for me the view should not as simple as default one. And to be frank I am not a good designer 🙂

[css]
<style>
#fileUpload {
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
font-size: 14px;
font-family: cursive;
color: blue;
}

#btnUploadFile {
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
font-size: 14px;
font-family: cursive;
color: blue;
}

#message {
border-radius: 5px;
font-size: 14px;
font-family: cursive;
color: blue;
margin-top: 15px;
}
h2 {
border-radius: 5px;
font-size: 20px;
font-family: cursive;
color: blue;
margin-top: 15px;
}
</style>
[/css]

Add the upload action in script

Now it is time to create upload action. For that, please go to the script file MyScript.js and do the coding as follows.

[js]
$(document).ready(function () {
$(‘#btnUploadFile’).on(‘click’, function () {
var data = new FormData();
var files = $("#fileUpload").get(0).files;
// Add the uploaded image content to the form data collection
if (files.length > 0) {
data.append("UploadedImage", files[0]);
}
// Make Ajax request with the contentType = false, and procesDate = false
var ajaxRequest = $.ajax({
type: "POST",
url: "Home/Upload",
contentType: false,
processData: false,
data: data,
success: function (data) {
$(‘#message’).html(data);
},
error: function (e)
{
console.log(‘Oops, Something went wrong!.’ + e.message);
}
});
ajaxRequest.done(function (xhr, textStatus) {
// Do other operation
});
});
});
[/js]

If you are not aware of uploading and downloading in MVC, I strongly recommend you to have a look here: Uploading and Downloading in MVC Step-by-Step.

So we have set Home/Upload as the URL action in our Ajax function right? So we are going to create that action. Go to your controller and create a JsonResult action as follows.

[csharp]
public JsonResult Upload()
{
string isValid = checkIsValid(Request.Files);
return Json(isValid, JsonRequestBehavior.AllowGet);
}
[/csharp]

So we have done that too, now stop for a while. To work with ZipArchive class you must include the namespace as listed below.

[csharp]
using System.IO.Compression;
[/csharp]

Now you will be shown an error as “Are you missing an assembly reference?”. Yes we are. We have not added that references right? So now we are going to add the references for System.IO.Compression and System.IO.Compression.FileSystem.

Right click on Reference in your project and browse for the references. If you uses Visual Studio 2015, the references will be in C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.6.

Please be noted that the folder names will differs according to your framework version

Compression_References

Now we will go back to our controller and write the codes for the function checkIsValid(Request.Files)

[csharp]
private string checkIsValid(HttpFileCollectionBase files)
{
string isValid = string.Empty;
try
{
foreach (string upload in Request.Files)
{
if (Request.Files[upload].ContentType == "application/octet-stream") //Content type for .zip is application/octet-stream
{
if (Request.Files[upload].FileName != "")
{
string path = AppDomain.CurrentDomain.BaseDirectory + "/ App_Data / uploads /";
if (!Directory.Exists(path))
{
// Try to create the directory.
DirectoryInfo di = Directory.CreateDirectory(path);
}

string filename = Path.GetFileName(Request.Files[upload].FileName);
string pth = Path.Combine(path, filename);
Request.Files[upload].SaveAs(pth);
isValid = CheckForTheIcon(pth);
}
}
else
{
isValid = "Only .zip files are accepted.";
}
}
return isValid;
}
catch (Exception)
{
return "Oops!. Something went wrong";
}
}
[/csharp]

As you can see we are looping through the HttpFileCollectionBase files and checks for the content type first.

Please be noted that the content type for the .zip file is application/octet-stream

Once the checking is done, we will save the files to a folder, we will send the path to the function CheckForTheIcon(pth). So our next thing we need to do is to create the function CheckForTheIcon().

[csharp]
private string CheckForTheIcon(string strPath)
{
string result = string.Empty;
try
{
using (ZipArchive za = ZipFile.OpenRead(strPath))
{
foreach (ZipArchiveEntry zaItem in za.Entries)
{
if (zaItem.FullName.EndsWith(".ico", StringComparison.OrdinalIgnoreCase))
{
result = "Success";
}
else
{
result = "No ico files has been found";
}
}
}
return result;
}
catch (Exception)
{
result = "Oops!. Something went wrong";
return result;
}
}
[/csharp]

As you can see we are looping through each ZipArchive class items and checks for the ‘.ico’ file in it. So if there is no error and there is ‘.ico’ file in the uploaded item zip item, you will get the message as “Success: or if it does not contain the ‘.ico’ file, you will get the message as “No ico files has been found”.

Now it is time to see our output. Please run your application.

Output

If_you_try_to_upload_not_zipped_item

If_you_try_to_upload_zipped_item_which_does_not_have_ico_file

If_you_try_to_upload_zipped_item_which_have_ico_file

Conclusion

Did I miss anything that you may think which is needed? Have you ever wanted to do this requirement? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

I hope you all are fine. Today we will learn how to perform upload and download operations in MVC. Please refer to the step-by-step approach in learning Model View Controller if you are new to MVC. Our MVC Master, Shivprasad koirala has explained the concepts in a perfect way.

Download the source code

Background

Some days earlier, I got a requirement to develop a upload and download mechanism in my MVC application. After completing it perfectly, I decided to share it with you all.

Using the code

Before moving further into the details, let us first list the key points we will explain in this article:

Let us start with creating a controller called “myAction”.
[csharp]
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace UploadDownloadInMVC.Controllers
{
public class myActionController : Controller
{
//
// GET: /myAction/
}
}
[/csharp]

As you can see that the controller is empty; we will be writing the action results next.
[csharp]
public ActionResult Index()
{
foreach (string upload in Request.Files)
{
if (Request.Files[upload].FileName != “”)
{
string path = AppDomain.CurrentDomain.BaseDirectory + “/App_Data/uploads/”;
string filename = Path.GetFileName(Request.Files[upload].FileName);
Request.Files[upload].SaveAs(Path.Combine(path, filename));
}
}
return View(“Upload”);
}
[/csharp]

The action result shown above is for index. So, whenever the application loads, the action result will be fired. For that, the following changes should be done for RouteCofig.
[csharp]
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute(“{resource}.axd/{*pathInfo}”);
routes.MapRoute(
name: “Default”,
url: “{controller}/{action}/{id}”,
defaults: new { controller = “myAction”, action = “Index”, id = UrlParameter.Optional }
);
}
}
[/csharp]

As you can see in the Index Action, we are checking whether the request parameter contains the files. If it exists, we will save the selected file to the directory

/App_Data/uploads/ (that we need to manually create in our application). After returning to the view Upload, we need to set the Upload view.

Upload View

The following is the code for the Upload view.
[html]
@{
ViewBag.Title = “Upload”;
}
<h2>Upload</h2>
<script src=“~/Scripts/jquery-1.11.1.min.js”></script>
<script>
$(document).ready(function () {
$(‘#btnUploadFile’).on(‘click’, function () {
var data = new FormData();
var files = $(“#fileUpload”).get(0).files;
// Add the uploaded image content to the form data collection
if (files.length > 0) {
data.append(“UploadedImage”, files[0]);
}
// Make Ajax request with the contentType = false, and procesDate = false
var ajaxRequest = $.ajax({
type: “POST”,
url: “myAction/Index”,
contentType: false,
processData: false,
data: data
});
ajaxRequest.done(function (xhr, textStatus) {
// Do other operation
});
});
});
</script>
<input type=“file” name=“FileUpload1″ id=“fileUpload” /><br />
<input id=“btnUploadFile” type=“button” value=“Upload File” />
@Html.ActionLink(“Documents”, “Downloads”)
[/html]

In the upload view, we have the following:

Here, we are adding the uploaded image content to the form data collection.
[csharp]
var data = new FormData();
var files = $(“#fileUpload”).get(0).files;
// Add the uploaded image content to the form data collection
if (files.length > 0) {
data.append(“UploadedImage”, files[0]);
}
[/csharp]

Once the data is added to the form data collection, we will pass the data to the controller via ajax call. Sounds cool, right? If the procedure goes well, we will see the output as follows.

When you choose the file and click upload, your selected file will be uploaded to the folder “uploads” as we have set it in the controller.

We have finished the process of uploading files. We will now move to the downloading section. This is the right time to add the remaining actions to our controller. The following is the code.
[csharp]
public ActionResult Downloads()
{
var dir = new System.IO.DirectoryInfo(Server.MapPath(“~/App_Data/uploads/”));
System.IO.FileInfo[] fileNames = dir.GetFiles(“*.*”); List<string> items = new List<string>();
foreach (var file in fileNames)
{
items.Add(file.Name);
}
return View(items);
}
public FileResult Download(string ImageName)
{
var FileVirtualPath = “~/App_Data/uploads/” + ImageName;
return File(FileVirtualPath, “application/force-download”, Path.GetFileName(FileVirtualPath));
}
[/csharp]

Do you remember that we have set an action link in the “Upload” View?
[html]
@Html.ActionLink(“Documents”, “Downloads”)
[/html]

Next, if we click on the “Documents” link, our Action Result Downloads will be fired, right? Now, the following code will explain what is happening here.
[csharp]
var dir = new System.IO.DirectoryInfo(Server.MapPath(“~/App_Data/uploads/”));
System.IO.FileInfo[] fileNames = dir.GetFiles(“*.*”); List<string> items = new List<string>();
foreach (var file in fileNames)
{
items.Add(file.Name);
}
return View(items);
[/csharp]

We are considering all the attached files, adding the file information to a list and returning this list to the view “Download”. Next, here’s the need to set another view. The following code is for the Download View.

Download View
[html]
@{
ViewBag.Title = “Downloads”;
}
<h2>Downloads</h2>
@model List<string>
<h2>Downloads</h2>
<table>
<tr>
<th>File Name</th>
<th>Link</th>
</tr>
@for (var i = 0; i <= Model.Count – 1; i++)
{
<tr>
<td>@Model[i].ToString() </td>
<td>@Html.ActionLink(“Download”, “Download”, new { ImageName = @Model[i].ToString() }) </td>
</tr>
}
</table>
[/html]

Here, we are taking the information (that we are sending from the controller) about the uploaded files and creating the Html.ActionLinks dynamically.

Please note that we are adding the Image name to the action. Here is the output after performing the operations.

As in the preceding image, when you mouse over the link, it will show the image name along with the controller URL. Click on the link to download the file. So simple, right?

Conclusion

I hope you liked the article. Please provide your valuable feedback; it matters a lot. You can download the source code to determine more.

Point of interest

MVC, MVC Upload, MVC Download, File Uploading Using MVC, File Downloading Using MVC