Fix hashed filenames on Framer downloads

Upload a PDF in Framer, connect it to a download button, and publish your site. Click that button and instead of getting your brochure or price list, the visitor's downloads folder shows something like H1noQ3ayrNopaxtDGhblzV37fag.pdf. It looks broken, and for anything people are meant to keep on their computer, like a real estate exposé or a pricing sheet, it looks unprofessional the moment they see it.

The fix takes about two minutes and works with any button on your page, not just Framer's built-in download button. It's a small component called Filename Download, and it sits between your button and the file to rename the download before it ever reaches the visitor.

Here is the same fix on video, or read on for the written version.

Why Framer does this

Framer stores uploaded assets, including PDFs, under generated names for caching and delivery purposes. That works fine for images nobody downloads and just sees rendered on a page. But the moment a visitor downloads a file instead of viewing it, that generated name is exactly what lands in their downloads folder, and it's the first thing they see.

Set it up in four steps

1. Copy the Filename Download component into your project and paste it on the canvas next to your download button.

2. Drag your button out of the component frame. It has to sit outside the frame but stay on the same page. This is the part people get wrong.

3. Select the component, then pick your button under the Button setting. Any button works, it does not have to be the Framer download button.

4. Remove the PDF from the button itself, then add the file under Upload File in the component and type the name you want under Save As.

After publishing, the download arrives with that exact name, no hash, no random characters, just the filename you typed.

One name is rarely enough: the CMS version

A single fixed filename covers a landing page with one PDF. The real use case is a CMS collection where every entry needs its own file and its own name. Think of a real estate site where every property listing has its own exposé, or a product catalog where each item has its own spec sheet.

1. Add two fields to your collection: a file field for the PDF and a plain text field for the filename.

2. Fill both per entry. The file field takes the PDF, the text field takes the name the visitor should see, for example Penthouse.pdf.

3. In the component, click the plus next to Upload File and Save As and connect each one to its CMS field.

Every entry now delivers its own correctly named file, without touching the design again. Add a new listing, fill in the two fields, and the download works automatically.

What to watch out for

• Keep the button outside the component frame, otherwise the component cannot use it.

• Remove the file from the button so it does not fight with the component.

• Include the file extension in the name field, so write Penthouse.pdf and not just Penthouse.

If the download still shows a hashed name after setup, check the button placement first. It is almost always the frame issue, not the file upload.

Get the component

You can grab the Filename Download component for Framer and drop it straight into your project.