How to display an image or pdf file on new tab in angular js?

Question

Below is my page:

Now when i click on Capture1.png i want to first display that image on new tab without any pop up as shown in my above picture.

Same way when i click on sample.pdf i want to first display pdf on new tab.

This is my html:

    <div ng-controller="MyController">
<a target="_blank" href="/Account/FetchFile/{{File_Id}}" ng-click="OpenFile(File_Id)" style="line-height:20px">Capture1.png</a>
<a target="_blank" href="/Account/FetchFile/{{File_Id}}" ng-click="OpenFile(File_Id)" style="line-height:20px">sample.pdf</a>
</div>

My Controller:

var app = angular.module('MyController', ['ur.file', 'ngResource']);

app.controller('MyController', function ($scope, $resource, $http,$window) {
      var url = "http://localhost:47000/Account/FetchFile/" + fileId;
      $window.open(url, '_blank');
}

Server side:

public FileContentResult FetchFile(int id)
        {
            byte[] fileContent = null;
            string fileType = "";
            string fileName = "";

            var file = GetFileByID(id);

            if (file != null)
            {
                fileContent = file.Data;
                fileType = file.ContentType;
                fileName = file.FileName;

                return File(fileContent, fileType, fileName);
            }

            return null;
        }

Now here problem is when i single click on capture1.png then two tabs are open with the pop up(like i shown in the above image) on my page(with option open and save) and 2 tabs get closed and those 2 pop ups appear on my same page as shown in my image.

Can anybody figure out whats the problem??

Solution 1

This worked for both image and pdf(opening in new tab):

public FileResult GetFile(int id)
byte[] fileContent = null;
string fileType = "";
string fileName = "";

var file = GetFileByID(id);

if (file != null) {
{
fileContent = file.Data;
fileType = file.ContentType;
return File(fileContent, fileType);
}


return null;
}

View:

<a target="_blank" href="/Account/FetchFile/{{File_Id}}" style="line-height:20px">sample.pdf</a>

Solution 2

You can create a window first then by using document write you can add any html , <script> or bind any event to window.

Using object tag to show content would be better to use in your case.

Code

app.controller('MyController', function($scope, $resource, $http, $window) {
  var url = "http://localhost:47000/Account/FetchFile/" + fileId;
  if(fileName.toLowerCase().indexOf('.png'))
    type = 'image/png';
  if(fileName.toLowerCase().indexOf('.pdf'))
      type = 'application/pdf';
  if(fileName.toLowerCase().indexOf('.doc'))        
      type = 'application/msword';
  var newTab = $window.open('about:blank', '_blank');
  newTab.document.write("<object width='400' height='400' data='" + url + "' type='"+ type +"' ></object>");
}

Type attribute value could be change as per your file type, In order to work this you should have flash player installed on your browser.

Hope this could help you, Thanks.