ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Preview uploaded file in Bootstrap Modal Popup using IFRAME in AngularJS<p>Hi&nbsp;mahesh213,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p>Image and pdf file will be previewed in iframe. Excel and doc file will be downloaded on click of preview.</p> <p><strong><span style="text-decoration: underline;">View</span></strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular-touch/1.6.1/angular-touch.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#34;MyApp&#34;, [ &#39;ui.bootstrap&#39;]); app.controller(&#34;MyController&#34;, [&#39;$scope&#39;, &#39;$http&#39;, &#39;$uibModal&#39;, function ($scope, $http, $uibModal) { $scope.terms = [{ Id: 1, Resume: &#34;&nbsp;F:/Upload&nbsp; a file inmaster(asp.net)/Upload&nbsp; a file inmaster(asp.net)/App_Dat/Test.jpg&#34;, Name: &#34;aaaa&#34; }, { Id: 2, Resume: &#34;&nbsp;F:/Upload&nbsp; a file inmaster(asp.net)/Upload&nbsp; a file inmaster(asp.net)/App_Dat/Test.pdf&#34;, Name: &#34;bbbb&#34; }, { Id: 3, Resume: &#34;&nbsp;F:/Upload&nbsp; a file inmaster(asp.net)/Upload&nbsp; a file inmaster(asp.net)/App_Dat/Test.xlsx&#34;, Name: &#34;cccc&#34; }, { Id: 4, Resume: &#34;&nbsp;F:/Upload&nbsp; a file inmaster(asp.net)/Upload&nbsp; a file inmaster(asp.net)/App_Dat/Test.doc&#34;, Name: &#34;dddd&#34;}]; $scope.GetDetails = function (filename) { $scope.modalInstance = $uibModal.open({ ariaLabelledBy: &#39;modal-title&#39;, ariaDescribedBy: &#39;modal-body&#39;, templateUrl: &#39;popup.htm&#39;, controller: &#39;ModelHandlerController&#39;, controllerAs: &#39;$ctrl&#39;, size: &#39;md&#39;, resolve: { Name: function () { return filename; } } }); } } ]); app.controller(&#34;ModelHandlerController&#34;, function ($scope, $uibModalInstance, Name) { $scope.Resume = &#34;App_Data/&#34; + Name; $scope.Cancel = function () { $uibModalInstance.dismiss(&#39;close&#39;); } }); &lt;/script&gt; &lt;/head&gt; &lt;body ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;form id=&#34;form1&#34; runat=&#34;server&#34;&gt; &lt;div class=&#34;container&#34;&gt; &lt;div&gt; &lt;div id=&#34;dvContainer&#34;&gt; &lt;div&gt; &lt;div class=&#34;table-responsive &#34;&gt; &lt;table id=&#34;dvData&#34; cellpadding=&#34;12&#34; class=&#34;table table-bordered&#34; style=&#34;margin-left: 20px; margin-right: 20px;&#34;&gt; &lt;tr class=&#34;success&#34;&gt; &lt;th&gt;&lt;b&gt;Id&lt;/b&gt;&lt;/th&gt; &lt;th&gt;&lt;b&gt;File&lt;/b&gt;&lt;/th&gt; &lt;th&gt;&lt;b&gt;Name&lt;/b&gt;&lt;/th&gt; &lt;th&gt;&lt;b&gt;Actions&lt;/b&gt;&lt;/th&gt; &lt;/tr&gt; &lt;tr dir-paginate=&#34;state in terms |orderBy:sortKey:reverse|itemsPerPage:10&#34; ng-model=&#34;search&#34;&gt; &lt;td&gt;{{state.Id}}&lt;/td&gt; &lt;td&gt;{{state.Resume.split(&#39;/&#39;)[state.Resume.split(&#39;/&#39;).length-1]}}&lt;/td&gt; &lt;td&gt;{{state.Name }}&lt;/td&gt; &lt;td&gt; &lt;input type=&#34;button&#34; value=&#34;View Details&#34; ng-click=&#34;GetDetails(state.Resume.split(&#39;/&#39;)[state.Resume.split(&#39;/&#39;).length-1])&#34; class=&#34;btn btn-primary&#34; /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><span style="text-decoration: underline;"><strong>Popup</strong></span></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&#34;modal-header&#34;&gt; &lt;h3 class=&#34;modal-title text-center&#34;&gt;details&lt;/h3&gt; &lt;/div&gt; &lt;div class=&#34;modal-body&#34; align=&#34;center&#34;&gt; &lt;iframe src=&#34;{{Resume}}&#34; height=&#34;200px&#34; width=&#34;500px&#34;&gt;&lt;/iframe&gt; &lt;/div&gt; &lt;div class=&#34;modal-footer&#34;&gt; &lt;button class=&#34;btn btn-warning&#34; type=&#34;button&#34; ng-click=&#34;Cancel()&#34;&gt;Cancel&lt;/button&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><img src="https://i.imgur.com/KkbUjdO.gif" alt="" width="472" height="283" /></p>https://www.aspforums.net:443/Threads/882493/Preview-uploaded-file-in-Bootstrap-Modal-Popup-using-IFRAME-in-AngularJS/https://www.aspforums.net:443/Threads/882493/Preview-uploaded-file-in-Bootstrap-Modal-Popup-using-IFRAME-in-AngularJS/Mon, 05 Aug 2019 07:00:00 GMT