Currently, in Bubble, there is not a native way to let a user download an image when they press a button to download. If you are making a file storage service, as I am, this would be expected by the user as a basic feature of the service.
How I (sort-of) did it in the past was to have the page direct to the URL source of the file after they press the 'Download' button, generally, that downloaded the file if it's not an image, that is. But this is not necessarily the action the user comes to expect. So there has to be a better solution, right?
Yes, I found it, and it's called HTML.
Wait, you are saying we are going to code? I thought this was all about not coding!
You would be right, so I really should have named it Mostly Without Code, however, 'code-less' programming comes with limitations here and there, so we have to improvise when this happens. As much as I like making applications without code, I still know how to code and I would recommend the same for you. Having, at least, a basic understanding of languages like HTML give you the ability to overcome problems like this one.
Now the actual solution in a picture!
First, setup an HTML element in the Bubble workspace, then do the following...
Let's break this down. The <a> tag is for creating a link so we will need that to direct the page to the source image (or any file). The style="" is a CSS element that you would use to style the button. href="" is where you would enter the source file URL that the <a> tag will use. You can either copy and paste the static URL between the quotations if the file will not change, or add a dynamic element like I have. Finally, just type download after the href="<link>". Yep, just simply typing download, downloads the file, how easy! It's almost like creating an AppleScript, oh wait...
How I (sort-of) did it in the past was to have the page direct to the URL source of the file after they press the 'Download' button, generally, that downloaded the file if it's not an image, that is. But this is not necessarily the action the user comes to expect. So there has to be a better solution, right?
Yes, I found it, and it's called HTML.
Wait, you are saying we are going to code? I thought this was all about not coding!
You would be right, so I really should have named it Mostly Without Code, however, 'code-less' programming comes with limitations here and there, so we have to improvise when this happens. As much as I like making applications without code, I still know how to code and I would recommend the same for you. Having, at least, a basic understanding of languages like HTML give you the ability to overcome problems like this one.
Now the actual solution in a picture!
First, setup an HTML element in the Bubble workspace, then do the following...
Let's break this down. The <a> tag is for creating a link so we will need that to direct the page to the source image (or any file). The style="" is a CSS element that you would use to style the button. href="" is where you would enter the source file URL that the <a> tag will use. You can either copy and paste the static URL between the quotations if the file will not change, or add a dynamic element like I have. Finally, just type download after the href="<link>". Yep, just simply typing download, downloads the file, how easy! It's almost like creating an AppleScript, oh wait...
Nice solution, I'll give a try
ReplyDeleteThanks, hope it works well for what you are wanting to do
DeleteIt works great! Thanks for the tips ;-)
ReplyDelete