Using the "download" attribute of Anchor (link) element for custom file names

[Jonathan Lahijani]

Some time ago, I learned you can add the "download" attribute to a link to force a browser to download the file when its clicked, like this:

<a download href="my-awesome-file.jpg">Download</a>

What I didn't realize until today is that you can actually specify a filename as a value for the download attribute like this which will automatically use that filename instead!:

<a download="my___awesome___file.jpg" href="my-awesome-file.jpg">Download</a>

This is incredibly convenient because it means if I want a user to download the same exact file 3 times but with specific filenames for each, I can just do this:

<a download="my___awesome___file-1.jpg" href="my-awesome-file.jpg">Download 1</a>
<a download="my___awesome___file-2.jpg" href="my-awesome-file.jpg">Download 2</a>
<a download="my___awesome___file-3.jpg" href="my-awesome-file.jpg">Download 3</a>

Furthermore, as you can see, I am using a triple underscore which ProcessWire cleans up and changes to a single underscore, as well as other changes (such as lowercasing everything) when uploading to a pagefile field.  I want my filenames to be exactly as I upload and I know there's ways to prevent ProcessWire from doing that, but using the download attribute in the way I described works perfectly for my use case.

[hollyvalero]

that is good to know!

[bernhard]

  On 3/27/2025 at 5:06 PM, Jonathan Lahijani said:

This is incredibly convenient because it means if I want a user to download the same exact file 3 times but with specific filenames for each, I can just do this:

<a download="my___awesome___file-1.jpg" href="my-awesome-file.jpg">Download 1</a>
<a download="my___awesome___file-2.jpg" href="my-awesome-file.jpg">Download 2</a>
<a download="my___awesome___file-3.jpg" href="my-awesome-file.jpg">Download 3</a>

Expand  

Nice! But why would anyone want to download the same file with 3 different names?? 😅

[Jonathan Lahijani]

  On 3/27/2025 at 10:24 PM, bernhard said:

Nice! But why would anyone want to download the same file with 3 different names?? 😅

Expand  

Good question.  It has to do with an order and production management system I'm developing.  Imagine you ordered a blanket with a personalized design, like a family photo of your choosing, and your order is for 3 of them.  That's a print-on-demand product that has to be ultimately manufactured by a fulfiller.

A person in the fulfiller manufacturing company will get this order and see it as 3 separate "production jobs" (not one production job with a quantity of 3 -- it's done this way because each manufactured product has to have specific status tracking and other data associated with it), but since it's the exact same product and design, the artwork that needs to be printed (a jpg or png) is actually the same across all 3, and they all point to the same file (won't get into the details of how it's all structured, it's very complex).  However I also designed the system so that an employee can understand a production job just by looking at the filenames of the artwork files they downloaded from the manufacturing system, which is required because after they download that file, it has to go through special ripping and printing software.

The filename format would be like this:
[manufacturer-location]___[provider]___[ship-by-date]___[product]___[production-job-id-x].png

That "x" at the end is represents the number based on the quantity of that exact personalized product.

A realistic example would be like this based on the quantity of 3 blankets that were originally ordered:
losangeles___somebigecommercesite___2025-03-28___blanket-60x80___123456-1.png
losangeles___somebigecommercesite___2025-03-28___blanket-60x80___123456-2.png
losangeles___somebigecommercesite___2025-03-28___blanket-60x80___123456-3.png

So going back to the download attribute and custom filenames, that original file may have been originally called 123.png (where '123' is the id of repeater the artwork file belongs to since that repeater has a single-file field), but when it is downloaded through the interface by a person in the manufacturing facility, it will download as losangeles___somebigecommercesite___2025-03-28___blanket-60x80___123456-1.png, -2, thanks to the download attribute.

Those downloaded files can then easily be loaded into a ripping software and the worker won't need to "think" about which ones had multiple quantities since that is fully expressed as individual files.

[bernhard]

Nice, thx for the explanation! Sounds like a cool project!

[BrendonKoz]

Has anyone had this not work for them? This works fine on my development machine, but not once it's on the production server...

[zoeck]

Can you try it if you don't specify the file extension in the download tag?

[BrendonKoz]

  On 4/4/2025 at 3:50 PM, zoeck said:

Can you try it if you don't specify the file extension in the download tag?

Expand  

Yeah, I've tried both scenarios (one without the file extension, and one with). I've tried multiple browsers, incognito/private windows. I haven't tried a different PC altogether (which I now will). It's such a simple thing, for it to not work is kind of weird. I checked my htaccess files and all uses of header() just in case, too. I'll try to see if I can capture the headers sent by my webhost, if they're any different.