loading...

How can I use the 'download' flag/attribute to download a file in HTML w/ Chrome?

twitter logo github logo ・1 min read

Ok, so I am making a website, and I need to be able to download something,
I tried this:

<a href="pathtofile/file.txt" download>Download the file</a>

But when I tried to click on the text, instead of downloading it, it just redirected me to the file, how do I make it download the file rather than redirecting me?
Thanks!
Cheers!

twitter logo DISCUSS (15)
markdown guide
 

As far as I know, it's not something you do from HTML, but once viewing the file you can right-click and Save as should be an option. I think automatic downloading on following a link is only for files that the browser doesn't know how to display (eg. zip files).

 

It is not about file type, I am using it for pics, txt, html, etc., which browser can display for sure - it is just about browser type / settings / flags if that download attribute starts download on click or not, as far as i know. I am using chrome, and if you not block download or multiple files download, it works as it should for any file type.

 

Oh, because I have download enabled... it just keeps redirecting the tab from my "test.html" to "file.extension".

Whats the code? Never seen any other behavior in Chrome than I've written above. Maybe some chrome flags or extension is messing with it, else it works like this - used it few times and it works and worked while ago when i were testing it to be sure :-)

Here's the code:

<!-- Before you say it, this path does exist -->
<a href="path/myfile.png" download>download the file</a>
<!-- when clicked it just redirects me, as I've stated -->

Hopefully this can help you and me understand the issue more.
Cheers!

I got this before, I meant u link real use case where it does not work.
Again, this should work, and works for me.
"Before you say it, this path does exist" -> I am not saying anything, because it even doesn't matter, u can use nonexistent file and it will try to download it.
Drop it into console here and tell me what it does:

const a = document.createElement("a");
a.href = "dev.to/some.png";
a.download="nonexistent.png";
a.click();

Ok, well this works, can you explain what's going on behind the scenes, like what relationship does href and download have?
like is, href the path, and download is the file.... or what?
Thank you so much!
Cheers!

Would be better to show where it does not work for u to find the problem.
Download is just attribute which tells browser to download href link target, and its value is just optional name u want it to have when it is downloading, that's pretty much everything what I have read about it and do not know about any magic behind this, since it worked for me like this exactly:-)
Maybe there are some other solution to google, but i do not know much more, i guess.

Well thanks for your insight!
Have a great day!
Cheers!

 

Is there any way to get around this because I really need to support the downloading of a few files and I have found nothing on this after checking W3SCHOOLS and sifting through StackOverflow...
Thanks!
Cheers!

 

I solved a similar problem once by literally base64 encoding the text and cramming the whole thing into the link itself:

let make = (~school, ~refreshClicked, ~resetClicked, _children) => {
  ...component,
  render: _self => {
    let dload =
      "data:application/octet-stream;charset=utf8;base64,"
      ++ btoa(Report.school(school)); // Right here, just concatenate
    <div>
      // ..
      <a href=dload> <button> {ReasonReact.string("Download")} </button> </a>
      // ..
    </div>;
  },
};

Maybe you could try a similar strategy?

 

Ok, but what's the whole html in JavaScript thing, it always appears incorrect in my IDE and looks weird, can you provide documentation so I can learn more about this, and where and where not to use this?
Thanks!
Cheers!

 

Oh, the HTML-in-JS is called JSX, this snippet is written in ReasonReact. You're not using that language or framework - the relevant part of this snippet is the <a> tag. The application/octet-stream MIME type is what will allow you to encode text directly in the link's DOM node itself and have it work as a download.

Classic DEV Post from May 24 '19

Follow Friday: What DEV member would you recommend following?

PDS OWNER CALIN (Calin Baenen) profile image
I am a 13 (as of Oct 30 of 2019) yr/o developer (I have been developing mini-projects for 4, years now, since I was 9), who makes projects in languages like: Java, HTML, Python 3, JS, CSS, and C#.

Stay ahead of the curve

Create Your DEV Account