Ionic 5 - How to save image url on ios?

When the user taps on the image, it goes to the modal then after a long hold action, it goes to an action sheet to select the action. Is there any way to save the image into the photo library?

This ionic app is ios only if it helps reduce the complexity

import { Component, OnInit } from '@angular/core';
import { ModalController, NavParams, ActionSheetController } from '@ionic/angular';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer/ngx';
import { File } from '@ionic-native/file';

  selector: 'app-modal-images',
  templateUrl: './',
  styleUrls: ['./'],

export class ImagesModalPage implements OnInit {

  image: any;
  held: boolean;

    private modalCtrl: ModalController,
    public actionSheetController: ActionSheetController,
    private navParams: NavParams,
    private transfer: FileTransfer, 
    private file: File
  ) { }

  ngOnInit() {
    this.imageUrl =;
    this.held = false;

  async showActionSheet() {
    if (!this.held) {
      this.held = true;
      const actionSheet = await this.actionSheetController.create({
        buttons: [{
            text: 'Save',
            handler: () => {
          }, {
            text: 'Cancel',
            role: 'cancel',
            cssClass: 'cancel-as',
            handler: () => {
                // do nothing
      actionSheet.onDidDismiss().then(() => {
        this.held = false;

      await actionSheet.present();

  private saveImage() {
    var fileTransfer  = new FileTransfer();
    var uri = encodeURI(this.imageUrl);

    // do I use this library to download image?

  closeModal() {


imageUrl is presented pretty much deus ex machina, so I have no idea whether it represents something that is already on the device, or is out on the internet, but I’ll assume it’s just a URL of some cute cat photo that somebody has discovered on a random website.

No, and in fact you should remove it and all references to it from your project. It’s obsolete. As documented here, Angular’s HttpClient takes an optional responseType parameter, and you should be able to work with either an arraybuffer or blob. To use stock Capacitor, you would then need to convert the file contents to base64 and pass it to writeFile. A more efficient and performant option that allows you to pass the Blob directly is diachedelic/capacitor-blob-writer.

imageUrl represents an external link that got referenced from another another page if that helps. so it grabs a .jpg or .png link and shows it on the page.