Download files from Folder (Directory) using AngularJS in ASP.Net MVC

Last Reply 16 days ago By dharmendr

Posted 16 days ago

Hi,

I have 3 fields in table Id  Name  FileName

currently my requirement is that after clicking of filename need to download that particular file

could you please help me

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller('MyController', ['$scope', '$http', function ($scope, $http) {
            $http({
                method: 'GET',
                url: '/Home/getAll/'
            }).success(function (data) {
                $scope.items = data;
            });
        } ]);
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div class="container" id="printarea">
        <table class="table table-bordered">
            <tr class="success">
                <th>Id</th>
                <th>Name</th>
                <th>FileName</th>               
                <th>Ation</th>
            </tr>
            <tr ng-repeat="item in items">
                <td>{{item.Id}}</td>
                <td>{{item.Name}}</td>
                <td>{{item.FileName}}</td>
            </tr>
        </table>
    </div>
</body>
</html>
You are viewing reply posted by: dharmendr 16 days ago.
Posted 16 days ago

Hi mahesh213,

Check the below sample.

Controller

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult getAll()
    {
        List<FileData> files = new List<FileData>();
        files.Add(new FileData { Id = 1, Name = "Test.doc", FileName = "~/Uploads/Test.doc" });
        files.Add(new FileData { Id = 2, Name = "Test.pdf", FileName = "~/Uploads/Test.pdf" });
        files.Add(new FileData { Id = 3, Name = "Test.docx", FileName = "~/Uploads/Test.docx" });
        files.Add(new FileData { Id = 4, Name = "Test.jpg", FileName = "~/Uploads/Test.jpg" });
        return Json(files, JsonRequestBehavior.AllowGet);
    }

    public JsonResult GenerateFileData(string fileName)
    {
        byte[] data = System.IO.File.ReadAllBytes(Server.MapPath(fileName));
        TempData["Data"] = data;
        return new JsonResult() { Data = new { FileName = fileName.Split('/')[fileName.Split('/').Length - 1] } };
    }

    [HttpGet]
    public virtual ActionResult Download(string fileName)
    {
        if (TempData["Data"] != null)
        {
            byte[] data = TempData["Data"] as byte[];
            return File(data, "application/octet-stream", fileName);
        }
        else
        {
            return new EmptyResult();
        }
    }

    public class FileData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string FileName { get; set; }
    }
}

View

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', []);
    app.controller('MyController', ['$scope', '$http', function ($scope, $http) {
        $http({
            method: 'GET',
            url: '/Home/getAll/'
        }).success(function (data) {
            $scope.items = data;
        });
        $scope.Download = function (fileData) {
            $http({
                method: 'POST',
                url: '/Home/GenerateFileData/',
                params: { fileName: fileData }
            }).success(function (data) {
                window.location = '/Home/Download?fileName=' + data.FileName;
            });
        };
    } ]);
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <table class="table table-bordered">
        <tr class="success">
            <th>Id</th>
            <th>Name</th>
            <th>FileName</th>
        </tr>
        <tr ng-repeat="item in items">
            <td>{{item.Id}}</td>
            <td>{{item.Name}}</td>
            <td><a href="#" ng-click="Download(item.FileName)">{{item.Name}}</a></td>
        </tr>
    </table>
</div>