In this article I will explain with an example, how to upload MP4 Video files, save (insert) to database table, retrieve (display) files from database table using
Entity Framework and play the files with Live Streaming from database table using
HTML5 Video Player in ASP.Net MVC Razor.
Files will be uploaded and then will be saved (inserted) to database table using
Entity Framework. The saved (inserted) files will be retrieved and displayed in HTML Grid (Table) and then the files will be played with Live Streaming from database table using
HTML5 Video Player in ASP.Net MVC Razor.
Database
This article makes use of a table named tblFiles whose schema is defined as follows.
![ASP.Net MVC: Upload, Save, Retrieve and Play (Live Stream) MP4 Video files using Entity Framework and HTML5 Video Player]()
Note: You can download the database table SQL by clicking the download link below.
Entity Framework Model
Once the
Entity Framework is configured and connected to the database table, the Model will look as shown below.
![ASP.Net MVC: Upload, Save, Retrieve and Play (Live Stream) MP4 Video files using Entity Framework and HTML5 Video Player]()
Namespaces
You will need to import the following namespaces.
using System.IO;
using System.Configuration;
using System.Data.SqlClient;
using System.Collections.Generic;
Controller
The Controller consists of three Action methods.
Action method for handling GET operation
Inside this Action method, all the video files are fetched using
Entity Framework and are returned to the View.
Action method for handling POST operation for uploading Files
This Action method gets called when a File is selected and the Upload Button is clicked, and it gets the uploaded file in the HttpPostedFileBase parameter.
The uploaded file is converted to an Array of Bytes using
BinaryReader class and finally is inserted into the database table using
Entity Framework.
Action method for handling GET operation for downloading Files
When the
HTML5 Video Player inside the HTML Table (Grid) requests the Video File to be streamed, then the ID of the particular file is sent to this Action method and using the File ID, the File’s binary data is fetched from the database using
Entity Framework.
Note: The following Action method performs File Download and hence the return type is set to FileResult.
Finally the File is downloaded using the File function.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
FilesEntities entities = new FilesEntities();
return View(entities.tblFiles.Where(p => p.ContentType == "video/mp4").ToList());
}
[HttpPost]
public ActionResult Index(HttpPostedFileBase postedFile)
{
byte[] bytes;
using (BinaryReader br = new BinaryReader(postedFile.InputStream))
{
bytes = br.ReadBytes(postedFile.ContentLength);
}
FilesEntities entities = new FilesEntities();
entities.tblFiles.Add(new tblFile
{
Name = Path.GetFileName(postedFile.FileName),
ContentType = postedFile.ContentType,
Data = bytes
});
entities.SaveChanges();
return RedirectToAction("Index");
}
[HttpGet]
public FileResult DownloadFile(int? fileId)
{
FilesEntities entities = new FilesEntities();
tblFile file = entities.tblFiles.ToList().Find(p => p.id == fileId.Value);
return File(file.Data, file.ContentType, file.Name);
}
}
This Form consists of an HTML FileUpload and a Submit Button. When the Button is clicked, the Index Action method for handling POST operation will be called.
@model IEnumerable<tblFile>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
</style>
</head>
<body>
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<input type="file" name="postedFile"/>
<input type="submit" id="btnUpload" value="Upload"/>
}
<hr/>
<table cellpadding="0" cellspacing="0">
@if (Model.Count() > 0)
{
foreach (var file in Model)
{
<tr>
<td>
<u>
@file.Name
</u>
<hr/>
<video id="VideoPlayer" src='@Url.Action("DownloadFile", "Home", new {fileId = file.id})' controls="true"
width="400" height="350" loop="true"/>
</td>
</tr>
}
}
</table>
</body>
</html>
