The file upload block allows you to upload files to your website that your website visitors can download. For example, you might have a PDF of a detailed specification sheet or a form that needs to be completed by hand and signed. Rather than making your web page too cluttered with information, your visitors can just download the file you have uploaded to your site.
File downloads in Rocketspark are built to be accessible, meaning they work well for everyone including visitors using screen readers, voice assistants, or keyboard navigation. To take yours a step further, give your download button styling a quick check to make sure it has good colour contrast. The FAQs below have some handy tips.
How to upload a downloadable file to your website
- Log into your Dashboard and go to Editor
- Go to the page where you want to add the file to be downloaded
- Hover your mouse over any existing block, click Add Block and then select File Upload
- Locate and select the file on your computer
- Once the file upload is complete hover your mouse over the file upload block and click the edit pencil icon and enter the text that you want to appear in the file download box. e.g. "View our price list"
- Click Save, and the file upload will now display.
- You can adjust the styling (background and text colours) by clicking the edit pencil on top of the file block.
- Further, click the dropdown for "file button" to change the button style.
It is recommended to choose a button style that does not have a transparent background, otherwise the "PNG" and icon will be hard to see which can affect users accessibility.
Edit an existing button style or add a new one if it has a transaprent background to resolve this.
It’s as easy as that. You can also position a text block above the file download box if you want to give further instructions for your visitors.
Another option is to have an image or text as a downloadable link Learn more about how to setup a downloadable link for an image or text here.
Take a look at our blog post to learn when and when not to use a "download file" link on your website.
How do I hide the file type (PDF, PNG, etc) on my download button?
By default, the download button on a File Upload block shows the file type, such as PDF, PNG, etc. To remove the file type text from the button, you'll need to use a Compact button style.
- In your Dashboard, click Change Design in the top left and select Button styles.
- Create a new button style, or click the edit icon on an existing one.
- Under Shape and Size, choose one of the Compact styles. Give it a button label you'll recognise, such as "Download button (compact)".
- Save your button style.
- Go back to the page with your File Upload block. Hover over the block and click the edit pencil icon.
- In the file button dropdown, select your new Compact button style.
The file type will no longer show on the button.
Changes to a button style apply everywhere that style is used on your site. If you want other buttons to keep the file type or their current look, create a new Compact style just for your downloads rather than editing an existing one.
For more on button colours, fonts and hover effects, see How do I change the style of my buttons?
FAQ
If we modify the original file, will we need to upload it again or does it read it from its location?
You will need to re-upload the file as per the instructions above. Please note, this will also change the link file - it will add a (1) to the end of the file link, or (1)(1), if this is the second reupload, etc. If you are sending out marketing materials using the file link, please ensure this is accurate before sending off.
What file types can I upload?
You can upload the following types of files:
|
|
What is the max file size I can upload?
The file size limit is 20MB (per file upload)
Therefore — types you cannot upload via that block include (but are not limited to):
Video-formats (e.g., mp4, mov, avi)
Many audio formats beyond mp3 (e.g., wav, flac)
Web formats or executables (e.g., exe, dmg, app)
Script or code files (e.g., js, py, php)
Streaming or container formats not in the list (e.g., mkv)
CAD or design file formats outside dwg (e.g., dxf, dgn)
How does Rocketspark handle accessibility for screen reader and voice assistant users?
When you add a file upload block, Rocketspark automatically:
- Adds an aria-label to the link telling assistive tech the action will download a file on the visitor's device.
- Makes the link keyboard-focusable so people can Tab to it.
What you can do to make things even better:
- Use clear, descriptive, visible text so sighted visitors know what they're downloading even more.
- Add a paragraph above the download block giving context about the file. Screen reader users often listen to the surrounding content before activating a link, so a friendly intro goes a long way.
How do I make sure the colours on my download button are easy to read?
Colour contrast makes a huge difference to readability! The Web Content Accessibility Guidelines (WCAG) recommend the following minimum contrast ratios between your text and the button background:
A quick way to check is to pop your text and background colours into a free tool like the WebAIM Contrast Checker at webaim.org/resources/contrastchecker.
A few easy wins:
- Make sure the button style does not use a transparent background because if the stack background is the same colour as the button text, the download icon will disappear.
- Dark text on a light button (or light text on a dark button) is usually a safe combo.
- Avoid pairing two similar tones like grey on grey or pastel on pastel. They might look stylish but they can be really hard to read.
- Test your button on a phone in bright daylight. If you're squinting, your visitors will be too.
Can I remove "PDF" or the file type from my download button?
Yes. Select a Compact button style in the file button dropdown on your File Upload block. Standard button styles show the file type and Compact styles don't. See How do I hide the file type on my download button? above.
Can I see how many times a file has been downloaded?
Not at the moment. The File Upload block doesn’t track download numbers or show visitor stats.
If I replace a file, will the download link stay the same?
No. When you upload a new version, it creates a new link (for example, with “(1)” added to the filename). You’ll need to update any buttons or text links on your site that point to the old file.
Are there any rules about file names?
Yes — keep names simple. Avoid special characters (like “#”, “%”, “&”, or “?”), as they can break download links. Letters, numbers, underscores, and hyphens are safest.
Can I upload multiple files in one block?
Each File Upload block can only hold one file. But you can add as many blocks as you like to a page.
Does uploading lots of files slow my site down?
No. Files are hosted separately and don’t affect page loading speed — unless you add a large number of download buttons or blocks to one page.