I want to test downloading a local file using the <a> tag in HTML. The attached code doesn't seem to download the file, instead, it opens it.
<p>Interested? Download <a href="download_files/ChannelLogo.png" download>here</a></p>
Your code is correct, however, the download attribute only works when you are viewing the code from a server, due to the same-origin policy of most browsers.
Are you previewing the file by double-clicking the file or directly opening it up in a browser? If the URL while previewing starts with something similar to file://FILEPATH_HERE or /Users/FILEPATH_HERE, you are opening the file rather than serving the file. If so, you should run your code from within a localhost setup to test. That may involve running a server locally, or using an editor extension to spin up a project-based server. Once your URL starts with http:// or https:// the download will work as intended.
Alternatively, you could upload the project somewhere on the web.
It depends on where the file is located and how files are being served.
Either way, whether it is a plain static website with local files or being served by a server, you might need to check the href again to make sure it is correct.
Could be something small like /download_files/ChannelLogo.png instead of download_files/ChannelLogo.png.
Edit after question update:
Yes answer by Riley is right: it will only download if you are using a server. You could use a server like Node.js to run and test what you would like to do.
Otherwise you could look into Electron if you would like to work with the filesystem more directly, all depending on what it is you would like to do with your program.
Related
While debugging my site, I have noticed a weird thing happening. Lets say the html file has a hyperlink like so:
This hyperlink uses "../" to take you back one directory
If I debug my own site in vscode and use chrome, if I click this, it gives me a weird page that says "Index of /Users/myusername/code/public_html/aboutme/" and shows all of the files in that directory. But then when I upload the files to my host, everything works just fine. Why is this? I suspect it may have to do with the way that "index.html" works.
A typical configuration for an HTTP server which is serving static files (i.e. mapping URLs directly onto files on the filesystem) is that if the URL maps onto a directory then to look for a file named index.html (or similar) and response with that.
For example, when using Apache HTTPD, this is handled by the DirectoryIndex directive.
When dealing with a file:/// scheme URL then there is no HTTP server which can do that mapping and the code internal to browsers which handles file:/// scheme URLs doesn't do it either.
I'd like to have an html file that organizes certain files scattered throughout my hard drive. For example, I have two files that I would link to:
C:\Programs\sort.mw
C:\Videos\lecture.mp4
The problem is that I'd like the links to function as a shortcut to the file. I've tried the following:
Link 1
Link 2
... but the first link does nothing and the second link opens the file in Chrome, not VLC.
My questions are:
Is there a way to adjust my HTML to treat the links as shortcuts to the files?
If there isn't a way to adjust the HTML, are there any other ways to neatly link to files scattered throughout the hard drive?
My computer runs Windows 7 and my web browser is Chrome.
You need to use the file:/// protocol (yes, that's three slashes) if you want to link to local files.
Link 1
Link 2
These will never open the file in your local applications automatically. That's for security reasons which I'll cover in the last section. If it opens, it will only ever open in the browser. If your browser can display the file, it will, otherwise it will probably ask you if you want to download the file.
You cannot cross from http(s) to the file protocol
Modern versions of many browsers (e.g. Firefox and Chrome) will refuse to cross from the http(s) protocol to the file protocol to prevent malicious behaviour.
This means a webpage hosted on a website somewhere will never be able to link to files on your hard drive. You'll need to open your webpage locally using the file protocol if you want to do this stuff at all.
Why does it get stuck without file:///?
The first part of a URL is the protocol. A protocol is a few letters, then a colon and two slashes. HTTP:// and FTP:// are valid protocols; C:/ isn't and I'm pretty sure it doesn't even properly resemble one.
C:/ also isn't a valid web address. The browser could assume it's meant to be http://c/ with a blank port specified, but that's going to fail.
Your browser may not assume it's referring to a local file. It has little reason to make that assumption because webpages generally don't try to link to peoples' local files.
So if you want to access local files: tell it to use the file protocol.
Why three slashes?
Because it's part of the File URI scheme. You have the option of specifying a host after the first two slashes. If you skip specifying a host it will just assume you're referring to a file on your own PC. This means file:///C:/etc is a shortcut for file://localhost/C:/etc.
These files will still open in your browser and that is good
Your browser will respond to these files the same way they'd respond to the same file anywhere on the internet. These files will not open in your default file handler (e.g. MS Word or VLC Media Player), and you will not be able to do anything like ask File Explorer to open the file's location.
This is an extremely good thing for your security.
Sites in your browser cannot interact with your operating system very well. If a good site could tell your machine to open lecture.mp4 in VLC.exe, a malicious site could tell it to open virus.bat in CMD.exe. Or it could just tell your machine to run a few Uninstall.exe files or open File Explorer a million times.
This may not be convenient for you, but HTML and browser security weren't really designed for what you're doing. If you want to be able to open lecture.mp4 in VLC.exe consider writing a desktop application instead.
If you are running IIS on your PC you can add the directory that you are trying to reach as a Virtual Directory.
To do this you right-click on your Site in ISS and press "Add Virtual Directory".
Name the virtual folder. Point the virtual folder to your folder location on your local PC.
You also have to supply credentials that has privileges to access the specific folder eg. HOSTNAME\username and password.
After that you can access the file in the virtual folder as any other file on your site.
http://sitename.com/virtual_folder_name/filename.fileextension
By the way, this also works with Chrome that otherwise does not accept the file-protocol file://
Hope this helps someone :)
Janky at best
right click </td>
and then right click, select "copy location" option, and then paste into url.
back to 2017:
use URL.createObjectURL( file ) to create local link to file system that user select;
don't forgot to free memory by using URL.revokeObjectURL()
I've a way and work like this:
<'a href="FOLDER_PATH" target="_explorer.exe">Link Text<'/a>
I'd like to have an html file that organizes certain files scattered throughout my hard drive. For example, I have two files that I would link to:
C:\Programs\sort.mw
C:\Videos\lecture.mp4
The problem is that I'd like the links to function as a shortcut to the file. I've tried the following:
Link 1
Link 2
... but the first link does nothing and the second link opens the file in Chrome, not VLC.
My questions are:
Is there a way to adjust my HTML to treat the links as shortcuts to the files?
If there isn't a way to adjust the HTML, are there any other ways to neatly link to files scattered throughout the hard drive?
My computer runs Windows 7 and my web browser is Chrome.
You need to use the file:/// protocol (yes, that's three slashes) if you want to link to local files.
Link 1
Link 2
These will never open the file in your local applications automatically. That's for security reasons which I'll cover in the last section. If it opens, it will only ever open in the browser. If your browser can display the file, it will, otherwise it will probably ask you if you want to download the file.
You cannot cross from http(s) to the file protocol
Modern versions of many browsers (e.g. Firefox and Chrome) will refuse to cross from the http(s) protocol to the file protocol to prevent malicious behaviour.
This means a webpage hosted on a website somewhere will never be able to link to files on your hard drive. You'll need to open your webpage locally using the file protocol if you want to do this stuff at all.
Why does it get stuck without file:///?
The first part of a URL is the protocol. A protocol is a few letters, then a colon and two slashes. HTTP:// and FTP:// are valid protocols; C:/ isn't and I'm pretty sure it doesn't even properly resemble one.
C:/ also isn't a valid web address. The browser could assume it's meant to be http://c/ with a blank port specified, but that's going to fail.
Your browser may not assume it's referring to a local file. It has little reason to make that assumption because webpages generally don't try to link to peoples' local files.
So if you want to access local files: tell it to use the file protocol.
Why three slashes?
Because it's part of the File URI scheme. You have the option of specifying a host after the first two slashes. If you skip specifying a host it will just assume you're referring to a file on your own PC. This means file:///C:/etc is a shortcut for file://localhost/C:/etc.
These files will still open in your browser and that is good
Your browser will respond to these files the same way they'd respond to the same file anywhere on the internet. These files will not open in your default file handler (e.g. MS Word or VLC Media Player), and you will not be able to do anything like ask File Explorer to open the file's location.
This is an extremely good thing for your security.
Sites in your browser cannot interact with your operating system very well. If a good site could tell your machine to open lecture.mp4 in VLC.exe, a malicious site could tell it to open virus.bat in CMD.exe. Or it could just tell your machine to run a few Uninstall.exe files or open File Explorer a million times.
This may not be convenient for you, but HTML and browser security weren't really designed for what you're doing. If you want to be able to open lecture.mp4 in VLC.exe consider writing a desktop application instead.
If you are running IIS on your PC you can add the directory that you are trying to reach as a Virtual Directory.
To do this you right-click on your Site in ISS and press "Add Virtual Directory".
Name the virtual folder. Point the virtual folder to your folder location on your local PC.
You also have to supply credentials that has privileges to access the specific folder eg. HOSTNAME\username and password.
After that you can access the file in the virtual folder as any other file on your site.
http://sitename.com/virtual_folder_name/filename.fileextension
By the way, this also works with Chrome that otherwise does not accept the file-protocol file://
Hope this helps someone :)
Janky at best
right click </td>
and then right click, select "copy location" option, and then paste into url.
back to 2017:
use URL.createObjectURL( file ) to create local link to file system that user select;
don't forgot to free memory by using URL.revokeObjectURL()
I've a way and work like this:
<'a href="FOLDER_PATH" target="_explorer.exe">Link Text<'/a>
I'd like to have an html file that organizes certain files scattered throughout my hard drive. For example, I have two files that I would link to:
C:\Programs\sort.mw
C:\Videos\lecture.mp4
The problem is that I'd like the links to function as a shortcut to the file. I've tried the following:
Link 1
Link 2
... but the first link does nothing and the second link opens the file in Chrome, not VLC.
My questions are:
Is there a way to adjust my HTML to treat the links as shortcuts to the files?
If there isn't a way to adjust the HTML, are there any other ways to neatly link to files scattered throughout the hard drive?
My computer runs Windows 7 and my web browser is Chrome.
You need to use the file:/// protocol (yes, that's three slashes) if you want to link to local files.
Link 1
Link 2
These will never open the file in your local applications automatically. That's for security reasons which I'll cover in the last section. If it opens, it will only ever open in the browser. If your browser can display the file, it will, otherwise it will probably ask you if you want to download the file.
You cannot cross from http(s) to the file protocol
Modern versions of many browsers (e.g. Firefox and Chrome) will refuse to cross from the http(s) protocol to the file protocol to prevent malicious behaviour.
This means a webpage hosted on a website somewhere will never be able to link to files on your hard drive. You'll need to open your webpage locally using the file protocol if you want to do this stuff at all.
Why does it get stuck without file:///?
The first part of a URL is the protocol. A protocol is a few letters, then a colon and two slashes. HTTP:// and FTP:// are valid protocols; C:/ isn't and I'm pretty sure it doesn't even properly resemble one.
C:/ also isn't a valid web address. The browser could assume it's meant to be http://c/ with a blank port specified, but that's going to fail.
Your browser may not assume it's referring to a local file. It has little reason to make that assumption because webpages generally don't try to link to peoples' local files.
So if you want to access local files: tell it to use the file protocol.
Why three slashes?
Because it's part of the File URI scheme. You have the option of specifying a host after the first two slashes. If you skip specifying a host it will just assume you're referring to a file on your own PC. This means file:///C:/etc is a shortcut for file://localhost/C:/etc.
These files will still open in your browser and that is good
Your browser will respond to these files the same way they'd respond to the same file anywhere on the internet. These files will not open in your default file handler (e.g. MS Word or VLC Media Player), and you will not be able to do anything like ask File Explorer to open the file's location.
This is an extremely good thing for your security.
Sites in your browser cannot interact with your operating system very well. If a good site could tell your machine to open lecture.mp4 in VLC.exe, a malicious site could tell it to open virus.bat in CMD.exe. Or it could just tell your machine to run a few Uninstall.exe files or open File Explorer a million times.
This may not be convenient for you, but HTML and browser security weren't really designed for what you're doing. If you want to be able to open lecture.mp4 in VLC.exe consider writing a desktop application instead.
If you are running IIS on your PC you can add the directory that you are trying to reach as a Virtual Directory.
To do this you right-click on your Site in ISS and press "Add Virtual Directory".
Name the virtual folder. Point the virtual folder to your folder location on your local PC.
You also have to supply credentials that has privileges to access the specific folder eg. HOSTNAME\username and password.
After that you can access the file in the virtual folder as any other file on your site.
http://sitename.com/virtual_folder_name/filename.fileextension
By the way, this also works with Chrome that otherwise does not accept the file-protocol file://
Hope this helps someone :)
Janky at best
right click </td>
and then right click, select "copy location" option, and then paste into url.
back to 2017:
use URL.createObjectURL( file ) to create local link to file system that user select;
don't forgot to free memory by using URL.revokeObjectURL()
I've a way and work like this:
<'a href="FOLDER_PATH" target="_explorer.exe">Link Text<'/a>
I'm just playing around with HTML, and wanted to create a link to access a file in a particular location on the disk (not on the disk where the source code of the web page is located).
I have tried to do the following:
Download My File
but this cannot access the file and gives an error.
What can be the problem, and how do I fix it?
Thanks!
This should work! Just add file:/// in the link URL
Download My File
This will only work if you run the Application offline.
There is no way you can do this with pure html. You will need to use a dynamic web technology such as php or Asp.net.
Can you imagine the security issues if you could download any file you wanted off the web server just by changing path of that link?