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.
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 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.