Loading files in-browser from a server and .djvu files do not load

Question

I am writing an app that loads files in an iframe. It works with .pdf and image files, but not with .djvu files. The file address is being passed into the iframe via AngularJS (v1.2)

When I try to load a .djvu file I get a 404.3 Not found error. Below is the view being rendered:

Index.cshtml

@model string
<div ng-controller="FileBrowserController" ng-init="getFiles('@Model')" style="width:100%;position:absolute;top:0;bottom:0;">
    <div class="row text-center" ng-show="showButtons" style="margin-bottom:5px">
        <div class="col-xs-1">
            <!--<button ng-show="f"  type="button" class="btn btn-sm btn-primary" ng-click="deleteFile()" ng-confirm-click="Are you sure that you want to delete this file?">Delete</button>-->
        </div>
        <div class="col-xs-10">
            <button ng-show="showButtons" type="button" class="btn btn-sm btn-primary" ng-disabled="currentFile.sortOrder==1" ng-click="previousFile()">Previous</button>
            <select ng-model="currentFile" ng-show="showButtons"
                    ng-options="file.sortOrder for file in files"
                    ng-change="setFile()"></select>
            <button ng-show="showButtons" type="button" class="btn btn-sm btn-primary" ng-disabled="currentFile.sortOrder==files.length" ng-click="nextFile()">Next</button>
        </div>
        <div class="col-xs-1"> </div>

    </div>

    <iframe style="min-height:100%;min-width:100%" ng-src="{{currentFileUrl}}"></iframe> 

    <!-- Modal -->
    <div class="modal fade" id="getdjvuPluginModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="modalLabel">Get DjVu Viewer browser plugin</h4>
                </div>
                <div class="modal-body">
                    <div>
                        <p>It doesn't look like you have installed a plugin to view ".djvu" files with.</p>
                    </div>
                    <p>
                        <strong>If you are using Internet Explorer, Firefox, or Safari:</strong>
                    </p>
                    <p>
                        Download the DjVu Browser Plug-in for Internet Explorer, Firefox and Safari. Please click <strong><a ng-href="{{djvuPluginUrl}}" target="_blank">here</a></strong> to go to the download page.
                    </p>
                    <p>
                        <strong>If you are using Chrome:</strong>
                    </p>
                    <p>
                        Download the DjVu Viewer Extension for Google Chrome. Please click <strong><a ng-href="{{chromePluginUrl}}" target="_blank">here</a></strong> to go to the Google Play store and download the plugin.
                    </p>
                    <hr />
                    <div>If you already have the plugin installed and think you are seeing this message in error then please reload the page.</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

</div>

@Scripts.Render("~/app/documents/detectDjVuPlugin.js")

The AngularJS passes the url to the iframe as a trusted resource url

$scope.currentFileUrl = $sce.trustAsResourceUrl($scope.currentFile.fileUrl);

I have tried following the recommended steps:

• Added Handler to the Web.config

<system.webServer> ... <staticContent> <!-- .DjVu files handler --> <mimeMap fileExtension=".djvu" mimeType="image/vnd.djvu"/> <mimeMap fileExtension=".djv" mimeType="image/vnd.djvu"/> </staticContent>

• Added MIME Type to IIS
• Checked that the djvu plugin is installed (I can load djvu files from the internet fine)
• Setting the file url as the source for an <embed> tag The app is running on .Net 4.0, C# backend, and AngularJS up front.

I am at a loss as to how to get this loading.

Answer 1

After much trial and error I got this working. In the end I had to switch from using IIS Express to full IIS, and add the MIME Types in there.

It's worth noting that when the mimeMap was added to the application's web.config Internet Explorer 11 did not detect it and was unable to display djvu files (same 404.3 error as before) but Chrome was happy enough.

In order to get .djvu files displaying in IE 11 I had to add the mimeMap to the root Site or Application Host. This can be done through IIS Manager; or through the wwwroot Web.Config or applicationhost.config files respectively.