Use the media file name as display name in the file link

src/Umbraco.Web.UI.Client/src/common/directives/components/media/umbmedianodeinfo.directive.js

@@ -40,6 +40,13 @@
 
             function setMediaLink(){
                 scope.nodeUrl = scope.node.mediaLink;
+                // grab the file name from the URL and use it as the display name in the file link
+                var match = /.*\/(.*)/.exec(scope.nodeUrl);
+                if (match) {
+                    scope.nodeFileName = match[1];
+                } else {
+                    scope.nodeFileName = scope.nodeUrl;
+                }
             }
 
             scope.openMediaType = function (mediaType) {
@@ -92,4 +99,4 @@
 
     angular.module('umbraco.directives').directive('umbMediaNodeInfo', MediaNodeInfoDirective);
 
-})();
+})();

src/Umbraco.Web.UI.Client/src/views/components/media/umb-media-node-info.html

@@ -14,7 +14,7 @@
                     <li>
                         <a href="{{nodeUrl}}" target="_blank">
                             <i class="icon icon-out"></i>
-                            <span>{{nodeUrl}}</span>
+                            <span>{{nodeFileName}}</span>
                         </a>
                     </li>
                 </ul>