I guess this isn’t so much a Meteor question as it is a simple HTML question.
I spent countless hours trying to get this to behave the way these clients would like.
Basically, I’m serving a Photoswipe gallery through a Meteor app, and then have a “Download image” feature. The feature works fine in Chrome on all devices. The clients I’m building it for use Firefox on Android, and Safari on iOS. We are anticipating a wide range of app visitors from various devices and various web browsers.
In Firefox and Safari on mobile browsers, instead of downloading the file, the browsers just open the link in a new window. Is there any way to actually download the file to a visitor’s device? On Desktop, it actually prompts to Save the file and download it.
The result of the “Download image” code after processing on the server and client is this in the browser:
<a href="http://localhost:3000/cdn/storage/Images/RGTwXzh5GqqLYm273/original/RGTwXzh5GqqLYm273.jpg?download=true" target="_blank" class="active-download" download="2018-04-29_152223.jpg" type="image/jpeg" style="color: rgb(255, 255, 255);">Download File Now</a>
I tried playing with this a few different ways; like with/without the ?download=true param.
I also looked around the web, and anywhere I can find a “Download image” type button, it’s the same behavior depending on the browser – Firefox/Safari open the image in a new window, Chrome actually downloads the file to a user’s gallery.
I’m assuming it’s impossible to override browser behavior for what it decides to do with jpeg href’s – someone please tell me I’m wrong. 
Should I be doing something on the route (flowrouter) with http headers that I just don’t know about?
it’s more a server problem , you need to serve your file with a content-disposition : attachment in the header.
I have not yet, no. Just getting back to it.
I’m assuming I can use meteorhacks:picker for this… if anyone’s got tips for a client initiated file download from SSR via Picker before I figure it out, I’m all ears.
I’ll post a solution when I have one.
Setting ?download=true query, will force setting Content-Disposition to attachment, source code link.
@ryanple behavior really depend from a browser. I recommend setting target="_parent" attribute, have you tested download behavior on our demo app?
@dr.dimitru I just tried your demo app on Android in Firefox, Chrome on Android, and Safari on iOS (all the environments I and clients have tested on).
The results are exactly what happens but what my clients wouldn’t like.
The expectation is for a “Download Image” button to download the file, and then the smartphone prompts the user what they want to do (like open it in their gallery app). Instead, Firefox and Safari do the opposite of what Chrome does, and actually download the file and have the notification at the top of the phone that the file has been downloaded.
I assumed that’s what ?download=true did; thank you for the awesome package by the way. I didn’t think it was necessary with HTML5’s advent of the download attribute to specify the content-disposition on the server.
I’m just going to accept this as browser based behavior that a web developer has no control over, unless you have any other thoughts.
Unfortunately there is not a lot options as download attribute not supported on mobile devices.
- Folks at StackOverflow recommends to display actual image without a link on mobile devices, so user can do “press-and-hold” to show “save” menu
- Using
target="_parent" will force to open image in new tab, where user can do “press-and-hold” to show “save” menu
That’s what we all have to accept and find a way to explain it to our clients.
Once again - you can create “fancy” page with an image and text below it, with explanation like:
Tap-n-hold over the image to select saving options…