CODEWITHSUNDEEP
androidnode.jstypescriptcordovaionic-framework
Anouar khaldi
Anouar khaldi

Reputation: 782

How to display the downloaded images in gallery with ionic

I Try to make an image available in the gallery after downloading, I use MediaScannerPlugin , so the question is how I can access cordova's plugin ? this is my code:

const fileTransfer: FileTransferObject = this.transfer.create();
let encoded_url = encodeURI(img_url);
fileTransfer.download(encoded_url, this.file.externalApplicationStorageDirectory+"download/"+img_id+".png", true).then((entry) => {
         // Download completed successfully
        let toast = this.toastCtrl.create({
          message: 'Image downloaded.',
          cssClass:'toastStyle',
          duration: 2000,
          position: 'bottom'
        });
        toast.present();
        // var cordova:any; with this line I got no errors but the downloaded image aren't available in the gallery
        cordova.plugins.MediaScannerPlugin.scanFile( this.file.externalApplicationStorageDirectory+"download/"+img_id+".png");

}, (error) => {
          // error was happened
          console.log("download error source "+  error.source);
          console.log("download error target " + error.target);
          console.log("upload error code" + error.code);
});

The error I got:

Uncaught (in promise): TypeError: Cannot read property 'plugins' of undefined TypeError: Cannot read property 'plugins' of undefined

Ionic version 4.6.0
Cordova version 9.0.0

Thanks.

Upvotes: 1

Views: 1744

Answers (2)

Alwin Jose
Alwin Jose

Reputation: 773

Just declare a variable on top of the page. At runtime, it will find the appropriate plugins and will send requests. Below you can find simple demonstration.

import { Injectable } from '@angular/core';
import {ToastController, LoadingController, Events, Toast, NavController, Platform} from 'ionic-angular';

declare var MediaScannerPlugin: any;

@Injectable()
export class YourClass {
     ...
     MediaScannerPlugin.scanFile( this.file.externalApplicationStorageDirectory+"download/"+img_id+".png");
     ...
}

Upvotes: 0

Aashay karekar
Aashay karekar

Reputation: 960

downloadViaURL(url){
    let url = "https://download.com/file.whatever";
    let path = this.file.externalDataDirectory + url.substring(url.lastIndexOf('/') + 1);

    this.file.checkFile(this.file.externalDataDirectory,url.substring(url.lastIndexOf('/') + 1)).then(value => {
      console.log('is already downloaded');
    },reason => {

      console.log('reason : ',JSON.stringify(reason))
      this.fileTransferObject = this.fileTransfer.create();

      this.fileTransferObject.download(url,path,true).then(value => {

        console.log('download : ',JSON.stringify(value));
        this.moveToGallery(value)


      },rejected=>{
        console.log('download rejected : ',JSON.stringify(rejected));
//incomplete file download
        this.file.removeFile(this.file.externalDataDirectory,url.substring(url.lastIndexOf('/') + 1)).then(value => {
          console.log('removeFile : ',JSON.stringify(value))
        },reason =>{
          console.log('removeFile reason : ',JSON.stringify(reason))

        }).catch(error=>{
          console.log('removeFile error : ',JSON.stringify(error))
        })


      }).catch(err=>{
        console.log('download error : ',JSON.stringify(err));
      })

//now the file(img/video/..) is download in project(com.app)/file which temp folder i.e. this.file.externalDataDirectory where it takes. this folder will be deleted where you delete the app that why you have to move or copy the file.

moveToGallery(value){
  this.file.moveFile(path, fileName, newPath, newFileName)
  //OR
  this.file.copyFile(path, fileName, newPath, newFileName)
}

Additional If you want to use save file which is in mobile storage then
https://stackoverflow.com/a/57494421/7456041

Upvotes: 0

Related Questions