0

IN my web page, i display some products that i stored in DB. One of the field of the Db Collections is called attachments and is an array that contains path to PDF files. So when i show them i do something like this:

               <div class="right" style="width: 40%; float: right; font-size: 80%; color: #c4c2bf;">
                    <div class="minPrize">Minimum prize: {{myauction.minPrize}}
                        <i class="fa fa-eur" aria-hidden="true"></i></div>
                    <div class="buyNow">Buy Now: {{myauction.buyNow}}
                        <i class="fa fa-eur" aria-hidden="true"></i></div>
                    <div class="myauctiondelivery">Delivery Terms: {{myauction.Delivery}}</div>
                    <div class="myauctionpayments">Payment Terms: {{myauction.Payment}}</div>
                    <div class="myauctionwarranty">Warranty: {{myauction.warranty}} days</div><br><br>
                    <hr class="hr" >

                    <div class="myauctionfile"><i class="fa fa-file-pdf-o" aria-hidden="true"></i>  {{myauction.attachments}}</div>

The last line is the pdf file. And it shows me something like this: enter image description here

Instead, i want to show only the name "CIRCULAZIONE.pdf".

There's also a way to open this file on browser when i click on it?

mpeg90
  • 167
  • 1
  • 2
  • 17
  • Possible duplicate of [AngularJS: Display blob (.pdf) in an angular app](http://stackoverflow.com/questions/21628378/angularjs-display-blob-pdf-in-an-angular-app) – Mistalis May 03 '17 at 07:29
  • your parameter is an array of attachments. you want only first one or what? – Vladimir M May 03 '17 at 07:35
  • Theorycally i would display all the files name that are in the array (in this case there's only one) And i would be able to open it in browser. – mpeg90 May 03 '17 at 07:38
  • In this case, you need to have something line ng-repeat to iterate over the array of attachments. – Vladimir M May 03 '17 at 07:43

1 Answers1

1

You can add a method to the scope that does the file name extraction from the path:

$scope.getFileName = function( path ){
    return (!path)?'':path.split('/').pop();
}

What you do, is you take a path, split it into parts with '/' as a devider, and then pop the last element of this array, that is supposed to be a file name.

The (!path) check is there as an example. You might want to check if the path is actually a string, but if your application is making sure that metho dis called only on strings, then you don't need that check.

Then you can use it as:

  <div class="myauctionfile" ng-repeat="item in myauction.attachments"><i class="fa fa-file-pdf-o" aria-hidden="true"></i>  {{getFileName(item)}}</div>
Vladimir M
  • 4,403
  • 1
  • 19
  • 24
  • Ok this is very simple. And if i want to open this file directly in the browser? Can you suggest me some tutorial or something similar? – mpeg90 May 03 '17 at 07:53
  • I think it was asked numerous times in SO. For example here: http://stackoverflow.com/questions/4853898/display-pdf-within-web-browser – Vladimir M May 03 '17 at 07:56