I want to download a file (image) that is in my DB, but it does not work.
When I make an external link to the file URL it just opens the image in the browser. So I did an HTML workaround that is supposed to fix that, but that also just opens the image in the browser. (My code is wrong?)
I also installed the File Downloader plugin but when I click download on the image, nothing happens.
It all works if the file is not an image, though.
Yeah that plugin didn’t work for me either
I’ve encountered this before. Images that are same-origin as your Bubble app’s domain (privately stored files) can be downloaded using the download href attribute (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes). However, public files stored at Bubble’s https://s3.amazonaws.com/appforest_uf S3 bucket are not same-origin and will not be downloadable using this method. From what I’ve read, a JavaScript solution would be ideal. If I get around to creating an example I’ll share it here.
@philip Ah so that’s why It does not work. It seems strange that it is so hard to just download an image in bubble. 
From what I’ve read, a JavaScript solution would be ideal. If I get around to creating an example I’ll share it here.
If you can create a solution that makes this work, that would be awesome.
I’ve created a pretty good solution (IMO) to this problem without requiring JavaScript. Essentially, when saving images in a workflow you want to also save the Base64 contents of the image in a text field at the same time. This gets around the same-origin limitation and you can still set privacy roles on the Base64 text field to protect its contents just as you would any other field.
See a demo: download image
Editor: sandboxthings | Bubble Editor
Update:
I should mention the conditional statements on the HTML element are important:
You want to make sure the file type (jpg or png most likely) is being detected correctly and output in the HTML button. In the screenshot you will see I’m only detecting two types, jpg (the mime type for both jpg and jpeg is image/jpeg) and png, but if you want to support others you will want to look up their mime types and implement the appropriate prepended code (data:image/[YOUR_IMAGE_TYPE];base64,).
The last thing to note: download="YOUR_FILE_NAME" will force the file name to match the one saved in your database on download. If you only use download with no ="" the file name will just be download.jpg/png
Since the :encoded in base64 image workflow action is server-side, the best way to handle an existing library of images (without re-uploading them) would be to create a API workflow where you modify an existing database type and add the base64 text field content by encoding the existing image file, then run a batch process on all records of that data type.
nice, can you force download instead of save as?
On my current device (Windows 10, Chrome) the file downloads immediately without prompting to “Save as…”. Not sure if this is a OS or browser setting you can change on your end.
Chrome downloads straight away
opera, firefox ask for save as
It is a bit impractical for my use though, I have my files in a file list and I need to download all types of files not just images. My browser was really laggy and slow browsing the data manager, I can’t imagine that with 1000+ images. Having 3 fields for one image is clunky as well.
That is one big workaround, I appreciate the effort.
Ah, gotcha. I think your best option here is using the “Make this file private” feature to enable all file types as downloadable by the browser. If you need files to be public you can do this with Privacy Roles on those fields.
This topic was automatically closed after 70 days. New replies are no longer allowed.
