Preview uploaded file in Bootstrap Modal Popup using IFRAME in AngularJS

Last Reply 13 days ago By dharmendr

Posted 13 days ago

Hi,

I have one table with fields Id,Name and Resume

name - text

Resume - upload file

I am going to display relevant fields on gridview

I need to preview excel, pdf and image after clicking of particular link in gridview

By default it should display only file name after clicking of that name

then only need to preview particulat file (pdf, excel and image) in Modal popup wtih iframe

EX:Upload

Id    Name    Resume

1       aaaa      F:\Upload  a file inmaster(asp.net)\Upload  a file inmaster(asp.net)\App_Data\Work Report.xlsx

Note:My server path("APP_Data")

Could you please kindly help me 

@{ 
    Layout = null;
}
<html ng-app="myApp">
<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/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.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.2.13/ng-file-upload.min.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">
        var app = angular.module("myApp", ['angularUtils.directives.dirPagination']);
        app.controller("myCntrl", ['$scope', '$http', 'myService', function ($scope, $http, myService) {
            $scope.mahesh = false;
            GetAllTerms();
            function GetAllTerms() {
                var getData = myService.getterms();
                getData.then(function (tc) {
                    $scope.terms = tc.data;
                }, function (tc) {
                    alert("Records gathering failed!");
                });
            }
          
        } ]);

        app.service("myService", function ($http) {
            //get All countries
            this.getterms = function () {
                return $http.get("/upload/getAll1");
            };
          
        });
    </script>
</head>
<body ng-controller="myCntrl">
    <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 dir-paginate="state in terms |orderBy:sortKey:reverse|itemsPerPage:10" ng-model="search">
                                <td>{{state.Id}}</td>
                                <td>{{state.Resume.split('\\')[state.Resume.split('\\').length-1]}}</td>
                                <td>{{state.Name }}</td>
                            </tr>
                        </table>
                    </div>
                    </div>
                </div>
            </div>
        </div>
</body>
</html>

 

 

You are viewing reply posted by: dharmendr 13 days ago.
Posted 13 days ago Modified on 11 days ago

Hi mahesh213,

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

Image and pdf file will be previewed in iframe. Excel and doc file will be downloaded on click of preview.

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <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", [ 'ui.bootstrap']);
        app.controller("MyController", ['$scope', '$http', '$uibModal', function ($scope, $http, $uibModal) {
            $scope.terms = [{ Id: 1, Resume: " F:/Upload  a file inmaster(asp.net)/Upload  a file inmaster(asp.net)/App_Dat/Test.jpg", Name: "aaaa" },
                            { Id: 2, Resume: " F:/Upload  a file inmaster(asp.net)/Upload  a file inmaster(asp.net)/App_Dat/Test.pdf", Name: "bbbb" },
                            { Id: 3, Resume: " F:/Upload  a file inmaster(asp.net)/Upload  a file inmaster(asp.net)/App_Dat/Test.xlsx", Name: "cccc" },
                            { Id: 4, Resume: " F:/Upload  a file inmaster(asp.net)/Upload  a file inmaster(asp.net)/App_Dat/Test.doc", Name: "dddd"}];
            $scope.GetDetails = function (filename) {
                $scope.modalInstance = $uibModal.open({
                    ariaLabelledBy: 'modal-title',
                    ariaDescribedBy: 'modal-body',
                    templateUrl: 'popup.htm',
                    controller: 'ModelHandlerController',
                    controllerAs: '$ctrl',
                    size: 'md',
                    resolve: {
                        Name: function () {
                            return filename;
                        }
                    }
                });
            }
        } ]);
        app.controller("ModelHandlerController", function ($scope, $uibModalInstance, Name) {
            $scope.Resume = "App_Data/" + Name;
            $scope.Cancel = function () {
                $uibModalInstance.dismiss('close');
            }
        });
    </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 dir-paginate="state in terms |orderBy:sortKey:reverse|itemsPerPage:10" ng-model="search">
                                <td>{{state.Id}}</td>
                                <td>{{state.Resume.split('/')[state.Resume.split('/').length-1]}}</td>
                                <td>{{state.Name }}</td>
                                <td>
                                    <input type="button" value="View Details" ng-click="GetDetails(state.Resume.split('/')[state.Resume.split('/').length-1])"
                                        class="btn btn-primary" />
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Popup

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div class="modal-header">
        <h3 class="modal-title text-center">details</h3>
    </div>
    <div class="modal-body" align="center">
        <iframe src="{{Resume}}" height="200px" width="500px"></iframe>
    </div>
    <div class="modal-footer">
        <button class="btn btn-warning" type="button" ng-click="Cancel()">Cancel</button>
    </div>
</body>
</html>

Screenshot