Angular 2 app - link to local file - html

In my app I'm viewing a list of files on the local machine (their paths are fetched from DB). When a file is being clicked, it should be opened. I tried the following with no success:
FileName
When the user clicks the link above, nothing happens. When using chrome, I can see the following error message in the console (on firefox there's no message):
not allowed to load local resource
I have read this question, and understood that:
Mozilla browsers refuse to follow file URLs on a page that it has fetched with the HTTP protocol.
I also understood and that this feature was implemented in other browsers as well.
The presented files are not located in the server, but on the local machine. So I can't use a relative link (right?). Is there anyway to bypass this and create a link that opens a local file?

You cannot access local resources from a website served over http because it is a security concern. Think of what would happen to your machine if any website could access files on it. You'll have other security restrictions for serving data from a different domain from your domain as well.
What exactly are you trying to accomplish by accessing a local file? Giving additional insight into the reason might get you more useful suggestions. Otherwise, the answer is that you can't and shouldn't do this.

Related

Is it possible to access and list files of local system in web browser.

My requirement is to show a panel where I list the local system directory, from where I drag and drop the files inorder to perform operations on it.
In HTML5 the FileSystem API is available , but most of the browsers are not supporting.
Is it possible by using input type as file? Like we browse and select a directory, then we can see the list of files and their details?
As the previous commenters correctly noted, this is not possible because it is considered a security hole. Think about a malicious script that could read out everything on your local file system just by visiting a web page.
You can however implement file drag-and-drop like this: https://github.com/moxiecode/plupload

Open local files(file://) using Chrome

I have an page with some forms. All the links work fine in IE. They open in a new tab nicely when the hyperlink is click by the user; however, I realized that when Chrome is use the link doesn't open. I keep clicking but nothing opens. The only way of opening the file is copying the hyperlink, opening a new tab in Chrome, paste and go.
Form1
Is this something that browser do? Because I tried it with FireFox and doesn't work either?
It there a way of going around? without installing anything in the browser? Because my user loves Chrome.
Thank you in advanced for the responses.
You can't access to files outside your server or "SandBox", sandbox include the files that user push to the browser or to your server.
If the access from browser to a pc files from web pages was possible, it would be a security problem.
The answer is that you can't with your approach and more importantly you shouldn't. Chrome behavior is in fact the right behavior and it protects you from having malicious users and/or scripts accessing your local resources.
The FILE protocol will access local or defined network named resources which will not be available to a remote user that visits the same page. In other words, you may have outsideserver mapped as a network resource/drive but someone else will not (This does not apply to IPs)
Here's what you can do:
Move the code to a server side script(php, asp, etc) and stream the file back out. Found a quick example here on SO. I did not verify it though. Streaming a large file using PHP
Install a webserver on outsideserver and map a new site to the shared folder. You can then reference it via http (http://outsideserver.com/form1.pdf)
Use the below extension for chrome. It will work.
Enable local file links
Below both options are working and tested.
Link 2
Link 3

Distribute html app on pendrive

I have an html app, with html, js, css and images, which I need to distribute on a pendrive for Mac and PC. When users open the app, however, they're receiving security errors in their browser.
I'm looking for a simple solution to this, but I can't find any easy way of opening a html app from a pen drive. Any solutions would be greatly appreciated.
EDIT:
You are right The error come from ajax local call to xml files.
Anyone has a solution ?
In reference to question - How can I make local ajax calls to xml files when distributing my html project locally?
The users who are having problems is probably due to the browser they are using and the state the browser was initialised in, as some browsers by default allow local ajax calls to files and some don't.
You have two options.
To your users specify a browser to run it in (for example chrome automatically disallows local ajax calls however if started with the flag --allow-file-access-from-files it will allow this behaviour)
Host the files on a web-server either in the flash drive or externally.
I think I have the solution.
With the mongoose portbla web server, I can launch a small web server without installation on mac an pc.
I just have to find how to put my page as default.
I wish it will help someone with the same problem.

Linking to local content in a web application

I am working on a replacement application to a legacy application. Due to certain design limitations of the legacy application, 'attachments' are stored as a String path in our database (generally files stored on a windows shared drive). The legacy application can then 'open' the attachments by opening a windows command shell and executing the given path.
The legacy (Oracle Forms) application is being phased out by a JSF based J2EE web application. The new application needs to be able to 'open' or link to these legacy attachments somehow. Is this even possible? I have attempted to use file:// URLs, but there are lot of caveats with using them. They only work on remote hosts in IE, firefox/chrome (and other modern browser I assume) prevent local file URLs.
Working only on IE is something that can be lived with for this particular feature. I further ran into an issue with file paths with spaces. For some reason if IE encounters a filepath with spaces in it, say
C:\Documents and Settings\user123\My Documents\testing\someFile.txt
it refuses to open that link. The browser automatically replaces the spaces (' ') with its URL Encoded '%20'.
The associated link I am attempting looks like:
link
Is there something simple to this I am missing? Or is there any easier way of doing this?
I wasn't quite sure what to tag this as so feel free to retag as necessary.
After some extensive testing I have reached the following conclusions:
Only IE will open file:// links that are on a page from a remote host, Other browsers will block them outright and nothing will happen when a user clicks on them.
IE will only open file:// URLs that point to a file that resides on a network drive
If a user clicks on a file:// link pointing to a file on the user's local drive, nothing will happen and they will get no error.
If a user clicks on a file:// link that points to a network file it will open in the browser, if possible.
If the file:// url points to an invalid location (unmapped network drive, file on a network drive that doesn't exist), Windows will show a popup error.
Spaces in the file path needs to be URL encoded with %20
Hopefully this helps someone else out who's looking for information on file urls.
If you use double quotes (") around the path to the file (you will probably need to URL encode these as %22), windows will be OK with the full path:
link

How do I create a link to a saved html page on my computer?

I'm working on a web application that caches html pages and saves it on the user's computer. I want to create a link, so that the user can click on the link and access the cached webpage.
Following is my link to a cached page:
BBC
When I click on the link, nothing happens. I'm not even getting any error.
Can someone please suggest how to create a link to a cached html page?
First of all, not all browsers handle local files equally, indeed, not all computers will be running windows or have a C: drive. Secondly, you don't have much control over a user's cache. Cached pages are usually handled by the browser automatically. You can use headers to specify how a browser ought to cache files, but it's not even required to do so. You can read the W3C recs on caching for more information.
It's unclear what you're trying to do here, but it sounds like it might make more sense for you to use HTML5 local storage or offline files than trying to mess around with their file system directly. The security model of most browsers is such that web apps don't interact with local files, which may be why it's not working for you with your current setup. Dive Into HTML5 has a good overview of HTML5 local storage and offline pages.
Edited based on comment below:
Most browsers' security settings won't let a page on a website access files stored locally. Only locally saved files can link to other locally saved files. Therefore, if the page with a link is on a website, your link won't work. Try creating a link to your file from another locally stored file and see if that works.
Instead of providing the .html extension in the main page where you provide the link you should do something as below:
< href="file:///C:/Users/xxx/yyy/bbc">BBC</a>