Preview file on AnchorLink Click in AngularJS

Last Reply 2 months ago By dharmendr

Posted 2 months ago

Hi,

For preview File i am going to use this link

<a target="_blank" href="{{state.Resume}}" >Link</a>

Preview uploaded file in Bootstrap Modal Popup using IFRAME in AngularJS

after clicking of that link it was navigating to the url

http://localhost:51518/employeekyc/~/xxx/xxx/App_Data/sample.pdf

but it was not showing any file

if i have removed this

http://localhost:51518/employeekyc/~

then i am getting file and aslo remove the spaces(if any spaces present in fil name) after clicking of linkbutton

my requirement is that need to preview relevant file using localhost after clicking of anchor tag in html

could you please kindly help me

Posted 2 months ago Modified on 2 months ago

Hi mahesh213,

Problem is with the App_Data folder.

The App_Data folder is used as a data storage for the web application.

It can store files such as .mdf, .mdb, and XML. It manages all of your application's data centrally.

It is accessible from anywhere in your web application.

So any file you place App_Data folder there won't be downloadable.

So instead of saving the files inside the App_Data, create another folder inside the project folder and move the files to there and update your database record with the folder name.

Check this example. Now please take its reference and correct your code.

Here in this example i have used folder name Files to store the files.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></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/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-touch/1.6.1/angular-touch.min.js"></script>
    <script type="text/javascript" src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <script type="text/javascript">
        var app = angular.module("MyApp", []);
        app.controller("MyController", ['$scope', '$http', function ($scope, $http) {
            $scope.terms = [{ Id: 1, Resume: "F:/Web/File_Preview_AngularJS/Files/Test.jpg", Name: "aaaa" },
                            { Id: 2, Resume: "F:/Web/File_Preview_AngularJS/Files/Test.pdf", Name: "bbbb" },
                            { Id: 3, Resume: "F:/Web/File_Preview_AngularJS/Files/Test.xlsx", Name: "cccc" },
                            { Id: 4, Resume: "F:/Web/File_Preview_AngularJS/Files/Test.doc", Name: "dddd"}];
        } ]);
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <form id="form1" runat="server">
    <div class="container">
        <div>
            <div id="dvContainer">
                <div>
                    <div class="table-responsive ">
                        <table id="dvData" cellpadding="12" class="table table-bordered" style="margin-left: 20px;
                            margin-right: 20px;">
                            <tr class="success">
                                <th><b>Id</b></th>
                                <th><b>File</b></th>
                                <th><b>Name</b></th>
                                <th><b>Actions</b></th>
                            </tr>
                            <tr ng-repeat="state in terms">
                                <td>{{state.Id}}</td>
                                <td>{{state.Resume.split('/')[state.Resume.split('/').length-1]}}</td>
                                <td>{{state.Name }}</td>
                                <td><a target="_blank" href="Files/{{state.Resume.split('/')[state.Resume.split('/').length-1]}}">Link</a></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>