“Save image” feature on mobile platforms

Some native Android/iOS apps, like WhatsApp and Facebook, have a “save image” feature when viewing content photos like profile pictures and images attached to chat messages; it’s basically a dropdown option which places an image directly into the user’s local photo collection with a single tap.

Peter O’Shaughnessy, a developer advocate for the Samsung Internet browser, recently published a post which describes how he implemented a Snapchat clone as a web app. As he writes, the trickiest part was allowing the user to save the generated image:

Cq1GsQmWgBQe2zL.jpg large.jpg1463×1037 226 KB

There is already discussion about a “Saving Files API” here, but I was wondering if we could tackle the “save image” feature separately, since it has a narrower scope. Being able to effortlessly save images on the mobile web seems like an important use case for which there currently doesn’t exist a proper solution.

Not being able to use local data on <a download> sounds like a browser bug which should not require a standardized alternative.

The problem with <a download> is that it places the image inside the Downloads app instead of the Photos app. This is an important distinction, because users expect the saved image to become available in Photos (since that’s where native apps put it).

Live demo: https://output.jsbin.com/jububen/quiet (I’ve tested in Chrome for Android)

That still sounds like it could be handled automatically by the browser or platform, by putting files with an image suffix into a dedicated Photos app. And that would not require every site with images to add dedicated mobile saving code. Perhaps you could open issues in the browser’s bug trackers.

i think there may be something special about having an image taken from your camera though. If an app wishes to save some other generated image, I would probably expect it to go to some other folder, like ‘downloads’. But I think an expectation of a photo going to your ‘photos’ folder or ‘camera roll’, comes from it having been taken from your camera, so therefore it should go with the other photos that you have taken. In that sense, I don’t think just going by the file extension would really work…

In the iOS native world, each app can have its own album (folder). Snapchat downloads to the Photos folder though.

As a developer, I don’t really mind where it downloads to - my issue was more not being able to download images properly at all. At least if it could be consistent across platforms, then I could add something like a toast notification to the user to suggest where to look for it, perhaps.

Shouldn’t it work in Chrome already despite the identified bug if you download a blob: URL instead?

In Chrome on Android (I tested with v52), you get a prompt saying “Chrome needs storage access to download files”. You can choose “Update permissions”. This prompts “Allow Chrome to access photos, media and files on your device?” to which you can tap “Allow”. Then your photo is downloaded to the ‘Download’ album.

But on iOS, both Chrome and Safari simply load the image up in another tab. (And as mentioned, Samsung Internet on Android blocks it).

I tested using: https://github.com/poshaughnessy/image-download-tests

If it could work in the same way as Chrome on Android, consistently across other browsers, I think this would be pretty good, at least as a short term solution.

Although I do agree with @simevidas that this method is a bit of a hack. (Imagine a native developer coming to the web and asking how to save a photo, and you answer “well, you just generate an anchor tag element with a ‘download’ attribute and set the src attribute to your data-uri and then simulate a click on it!”).

My own instinct would be to prefer adding a simple image option to an existing File Saving API, rather than having its own separate one, but I guess this will take more thought…

Fundamentally, this feels like something for the user agents to do (e.g. the browser would offer to save a file to photos, rather than downloads folder, based on MIME type - ideal - or file extension - as a last resort), rather than something that would benefit froma new property/method/whatever in the spec. This way, browsers could also offer related settings (e.g. “always save images to my photos”, “choose download folder for images”, or similar)