File-Download option for users

Need help
1

How do i create a “Download” icon next to an audio player with functionality for user’s to be able to download the audio file?

(I’m using the free audio player from bubble that plays the audio file uploaded to my app).

3

You will want to create a HTML element within a Group element since Bubble doesn’t support the download option natively in the editor’s Link element. Essentially generating a HTML link (a href) manually like so:

<a href="https://URL OF FILE TO DOWNLOAD" download="" target="_blank" title="TITLE TO DISPLAY ON HOVER (probably a file name, database object name, or URL to file">DOWNLOAD TEXT (or icon) TO DISPLAY ON SCREEN</a>

It’s a normal link with two additions:

download initiates the browser download function when a person clicks the link

target=_blank causes this action to take place in a new tab which automatically closes

You can style this element with CSS either directly by adding a style attribute, like this: style="color:#000000;background-color:rgba(0,0,0,0.1);border-radius:10px;font-size:12px;font-family:Source Sans Pro, Arial, sans-serif;font-weight:500;width:100%;height:100%;" or indirectly by creating a new CSS class in Editor->Settings->SEO/Metatags->Script/meta tags in header like this:

 <style>
.download_button {
    color:#000000;
    background-color:rgba(0,0,0,0.1);
    border-radius:10px;
    font-size:12px;
    font-family:Source Sans Pro, Arial, sans-serif;
    font-weight:500;
    width:100%;
    height:100%;
    }
</style>

You would then apply this class by adding class="download_button" to the link element: <a href="..." class="download_button"...>. With this method you will only have to modify the style of this download button in one location and re-use it over and over again. By setting height and width to 100% this forces the HTML link to fill up the full size of the group it is contained within (this way, the outer Group is how you control positioning, size and responsiveness of the HTML button).

Understandably this isn’t a no-code solution, but it’s the only way I’ve been able to achieve what you’re looking for. You can make the process of styling easier on yourself (since I only provided a bare-bones black and gray button with no hover effect) by using an online CSS generator, this was the first page in a Google search for CSS button style generator: http://cssbuttoncreator.com

Let me know if you have further questions on how to implement this.

5 Likes
4

This topic was automatically closed after 70 days. New replies are no longer allowed.