javascript – Cannot open local file – Chrome: Not allowed to load local resource

javascript – Cannot open local file – Chrome: Not allowed to load local resource

We use Chrome a lot in the classroom and it is a must to working with local files.

What we have been using is Web Server for Chrome. You start it up, choose the folder wishing to work with and go to URL (like 127.0.0.1:port you chose)

It is a simple server and cannot use PHP but for simple work, might be your solution:

https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

1)
Open your terminal and type

npm install -g http-server

2)
Go to the root folder that you want to serve you files and type:

http-server ./

3)
Read the output of the terminal, something kinda http://localhost:8080 will appear.

Everything on there will be allowed to be got.
Example:

background: url(http://localhost:8080/waw.png);

javascript – Cannot open local file – Chrome: Not allowed to load local resource

Okay folks, I completely understand the security reasons behind this error message, but sometimes, we do need a workaround… and heres mine. It uses ASP.Net (rather than JavaScript, which this question was based on) but itll hopefully be useful to someone.

Our in-house app has a webpage where users can create a list of shortcuts to useful files spread throughout our network. When they click on one of these shortcuts, we want to open these files… but of course, Chromes error prevents this.

This webpage uses AngularJS 1.x to list the various shortcuts.

Originally, my webpage was attempting to directly create an <a href..> element pointing at the files, but this produced the Not allowed to load local resource error when a user clicked on one of these links.

<div ng-repeat=sc in listOfShortcuts id={{sc.ShtCut_ID}} class=cssOneShortcutRecord >
    <div class=cssShortcutIcon>
        <img ng-src={{ GetIconName(sc.ShtCut_PathFilename); }}>
    </div>
    <div class=cssShortcutName>
        <a ng-href={{ sc.ShtCut_PathFilename }} ng-attr-title={{sc.ShtCut_Tooltip}} target=_blank >{{ sc.ShtCut_Name }}</a>
    </div>
</div>

The solution was to replace those <a href..> elements with this code, to call a function in my Angular controller…

<div ng-click=OpenAnExternalFile(sc.ShtCut_PathFilename); >
    {{ sc.ShtCut_Name }}
</div>

The function itself is very simple…

$scope.OpenAnExternalFile = function (filename) {
    //
    //  Open an external file (i.e. a file which ISNT in our IIS folder)
    //  To do this, we get an ASP.Net Handler to manually load the file, 
    //  then return its contents in a Response.
    //
    var URL = /Handlers/DownloadExternalFile.ashx?filename= + encodeURIComponent(filename);
    window.open(URL);
}

And in my ASP.Net project, I added a Handler file called DownloadExternalFile.aspx which contained this code:

namespace MikesProject.Handlers
{
    /// <summary>
    /// Summary description for DownloadExternalFile
    /// </summary>
    public class DownloadExternalFile : IHttpHandler
    {
        //  We cant directly open a network file using Javascript, eg
        //      window.open(\SomeNetworkPathExcelFileMikesExcelFile.xls);
        //
        //  Instead, we need to get Javascript to call this groovy helper class which loads such a file, then sends it to the stream.  
        //      window.open(/Handlers/DownloadExternalFile.ashx?filename=//SomeNetworkPath/ExcelFile/MikesExcelFile.xls);
        //
        public void ProcessRequest(HttpContext context)
        {
            string pathAndFilename = context.Request[filename];               //  eg  \SomeNetworkPathExcelFileMikesExcelFile.xls
            string filename = System.IO.Path.GetFileName(pathAndFilename);      //  eg  MikesExcelFile.xls

            context.Response.ClearContent();

            WebClient webClient = new WebClient();
            using (Stream stream = webClient.OpenRead(pathAndFilename))
            {
                // Process image...
                byte[] data1 = new byte[stream.Length];
                stream.Read(data1, 0, data1.Length);

                context.Response.AddHeader(Content-Disposition, string.Format(attachment; filename={0}, filename));
                context.Response.BinaryWrite(data1);

                context.Response.Flush();
                context.Response.SuppressContent = true;
                context.ApplicationInstance.CompleteRequest();
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

And thats it.

Now, when a user clicks on one of my Shortcut links, it calls the OpenAnExternalFile function, which opens this .ashx file, passing it the path+filename of the file we want to open.

This Handler code loads the file, then passes its contents back in the HTTP response.

And, job done, the webpage opens the external file.

Phew ! Again – there is a reason why Chrome throws this Not allowed to load local resources exception, so tread carefully with this… but Im posting this code just to demonstrate that this is a fairly simple way around this limitation.

Just one last comment: the original question wanted to open the file C:02.jpg. You cant do this. Your website will sit on one server (with its own C: drive) and has no direct access to your users own C: drive. So the best you can do is use code like mine to access files somewhere on a network drive.