I'm new to Vue.js and would like to know if there's a way to view PDF files that are stored independently from the Vue project through said Vue application.
Here's what I need:
All PDF files are stored in a folder. I'd like to provide links to access them in the application that I get from the backend server. Upon clicking the link, the PDF should open in a new tab and the URL would simply be something like
file:///C:/Users/user/Downloads/campusmap.pdf
What I have tried so far:
<a :href="fileAddress">View file</a>
When I hover over the link on my browser, It shows the right URL but clicking on it does nothing.
If I right-click to open in a new tab, it says blocked (about:blank#blocked)
Using <router-link> shows
localhost:8080/C:/Users/user/Downloads/campusmap.pdf
when hovered over it.
Is there a way to be able to just view the PDF through a link the way I want? Please note that I can't store all the PDF files in the asset or public folders.
Thanks for your help!
You can't link to a file:// protocol url from a page sourced via the http(s):// protocol - this is a security measure built in to modern browsers. Your only option is to also serve up the local files behind a web server, or run the app locally behind a file:// url.
Scenario:
1) I'm inside Dropbox Cloud.
2) I have a few files there.
3) I click "Download" for a specific file.
4) The file is immediately downloaded in the browser.
Let's review section 4)
I would like to hijack the download request so I can manipulate it to "download" \ "send the file" to a local server of mine rather than directly downloading the file.
I can think of a few ways to do that:
1) A small chrome extension that runs in the background and query the DOM in order to assemble the download link and then send it to my server so I can send a get request to it.
2) Parsing the html page with a small web scraper and do the exact thing I would do as section 1)
3) Use Dropbox API V2 in order to get a url link for a specific file or a specific container with its links and then initiate a download request whenever I choose to.
Yet, I would like to know if there is a way to directly takeover the initiated download request on the browser, so I can route it to another server of mine.
I'm asking this because eventually I would like to transform the file on my side and only then to once again initiate the download request (via a hidden form with a listener let's say) to the one who initiated the download
A flow image to be more clear:
I am planning to create an app using html5 file api and javascript to take directory path as input and be able to process (search for a text) all files in that directory and sub directories.
currently I am doing it using batchscript, What are constraints/obstacles doing it using HTML/javascript.
In short: You can't to that automatically.
Access the local filesystem from any browser is blocked for security reasons. Reason: Imagine any website being able to access the files on your filesystem.
Read this: Local file access with javascript
Maybe you want to rephrase your question and say what you actually want to acheive.
You can access simple file information using the user's input and using <input type=file>. But the user would require to do the following steps:
Click the "Browse button" (a file dialogue appears).
Navigate to the requested folder.
Select 1 or many files.
Click "Open".
Mozilla has documented this well with an example: https://developer.mozilla.org/en/docs/Using_files_from_web_applications#Example_Showing_file(s)_size
On http://www.html5rocks.com/en/tutorials/file/dndfiles/ it says:
As example of its capabilities, the File API could be used to create a thumbnail preview of images as they're being sent to the server, or allow an app to save a file reference while the user is offline.
I cannot find any information about how it works to save a file reference while the user is offline. Is there a possibility to solve this problem? Where can I find information about it?
I have WAMP installed on a network machine. I have a table with file links, for people could open those files directly from a web page.
Those files are in another server, in the same network as WAMP.
When the users click on the link it appears the following error:
"not allowed to load local resource: file:///networkdrive/directorie/file.xls"
How can I resolve this?
I have this:
<button type="button" onClick="openfile('networkdrive/ptlr/Sectorial/LRCD/Horários/Equipas Turno.xls')">botao</button>
<script>
function openfile(file) {
window.location = "file:///" + file;
}
</script>
Just read the error: "not allowed to load local resource (...)"
Or on Firefox I get "Access to (...) from script denied".
It seems you are looking for a magical solution that will solve it, but no, it's exactly as the description of the error says: you are not allowed to do that because of security reasons.
The problem is that you're trying to make the browser open a file on your local drive, and that's not allowed from any protocol other than file:/// itself. So, what you'll want to do is either make sure the local file is also accessible via a server, or open the webpages that contain this script from file:/// too.
You can see this at work by first opening http://jsbin.com/OYObEMA/1/ and seeing this same error occur, then pressing CTRL+S and saving it as a single HTML file, and opening that HTML file then. The JSBin one opens via the internet, so isn't given access to the file:/// protocol, but the local (downloaded) HTML file can access it.
One way you could kind-of do this is to just provide the url the user needs to go to instead. So, just make an <input> that has a value set to the url the user would need to go to, and then provide the instructions "please copy this url into your url bar to open this file". That's not an elegant way to do it, but it would kind-of work.
About your answer to my initial comment: sure, I understood that. The question was not meant in a literal way, but to make you start thinking about what you actually try! You mix different environments.
either need to use webdav for this, if your client side applications are able to use that http extension to load and save files, or
you have to do the old scheme known from the IT middleages which is still typical for MS-Windows systems: offer the file for download via http and add an additional upload service (which will give you versioning pain), or
deliver your web page via the same protocol (network share) so that it is opened with as a local file on the client side, since then your are allowed to open additional local files referenced inside the web page.