import { Component, OnInit } from '#angular/core';
import { ModalController, Platform } from '#ionic/angular';
import { PushdataService } from '../pushdata.service';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '#ionic-native/file-transfer/ngx';
import { File } from '#ionic-native/file/ngx';
#Component({
selector: 'app-modalquotes',
templateUrl: './modalquotes.page.html',
styleUrls: ['./modalquotes.page.scss'],
})
export class ModalquotesPage implements OnInit {
public storageDirectory:any;
constructor(private transfer: FileTransfer, private file: File, private modalCtrl: ModalController, public pushdata: PushdataService) {
}
downloadme() {
const fileTransfer: FileTransferObject = this.transfer.create();
this.storageDirectory = this.file.externalRootDirectory + 'Download/';
const url = "https://xxxxx.com/server_api/asset/quotes/test.jpeg";
fileTransfer.download(url,this.storageDirectory + "test.jpeg", true).then(
(entry) => {
alert('Berhasil download dan tersimpan di : ' + this.storageDirectory + "test.jpeg");
}, (error) => {
alert('gagal : ' + JSON.stringify(error));
});
}
ngOnInit() {
}
}
This is my code page.ts but the result download is "Permitte Denied". Please help me, i have much try anything but some error. This is only work for "this.file.externalApplicationStorageDirectory" but file download just from root folder apps.. But i want this image download to folder Download.
Firstly, the externalRootDirectory property is used for storing a file to an external storage such as SD card.
so i suggest that you change the following line of code:
this.storageDirectory = this.file.externalRootDirectory + 'Download/';
TO
this.storageDirectory = 'Download/';
This should download your file into the Downloads folder
Related
I have created the basic ionic app which can launch camera. I installed all the required plugins and also i have used the right version of cordova . I am not getting any errors and also able to create apk for that . When using in apk in the android mobile, camera is not getting launched.
this is the home.html code adding camera module
<button ion-button (click)="takePhoto()">camera</button>
<p align="center"><img src="{{ myphoto }}"></p>
this is the home.ts file
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '#ionic-native/camera';
import { Database } from '../../providers/database/database';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
tabBarElement: any;
splash = true;
myphoto:any;
public hasTrees : boolean = false;
public trees : any;
constructor(public navCtrl: NavController, private camera:Camera,
public DB : Database) {
this.tabBarElement = document.querySelector('.tabbar');
}
takePhoto(){
const options: CameraOptions = {
quality: 70,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64:
this.myphoto = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});
}
ionViewDidLoad() {
this.tabBarElement.style.display = 'none';
setTimeout(() => {
this.splash = false;
this.tabBarElement.style.display = 'flex';
}, 4000);
}
ionViewWillEnter()
{
this.displayTrees();
}
displayTrees()
{
this.DB.retrieveTrees().then((data)=>
{
let existingData = Object.keys(data).length;
if(existingData !== 0)
{
this.hasTrees = true;
this.trees = data;
}
else
{
console.log("we get nada!");
}
});
}
addSpecies()
{
this.navCtrl.push('Add');
}
viewSpecies(param)
{
this.navCtrl.push('Add', param);
}
}
I am using HTML input for choosing file in my Ionic3/Angular application. I am using below code:
// in .html file
<input #fileUpload type="file" name="myfile"(change)="onFileChoose($event)"/>
// in .ts file
onFileChoose($event): void {
this.fileChooser.getFileInfo($event).then((result) => {
this.fileName = result.fileName;
this.fileData = this.sanitizeFileData(result.fileData);
this.fileSize = result.fileSize;
this.fileType = result.fileType;
}, (error) => {
this.helperProvider.createAlert('Alert', 'File is corrupted.');
});
}
getFileInfo(event: Event): Promise<any> {
let target = event && event.target;
let files: Array<File> = target && target['files'];
console.log(files[0].type);
console.log(files[0].name);
return new Promise((resolve, reject) => {
if (files && files.length) {
files = Array.from(files);
let fileName = files[0].name;
let fileSize = files[0].size;
let fileType = files[0].type;
let fileReader = new FileReader();
fileReader.onload = () => resolve({
fileData: fileReader.result,
fileName: fileName,
fileSize: fileSize,
fileType: fileType
});
fileReader.onerror = error => reject(error);
fileReader.onabort = error => reject(error);
fileReader.readAsDataURL(files[0])
}
});
}
This is working fine in iOS and Browser. Both, in android and browser, i could get the original name, size and type of the file. But the problem occurs in Android.
Scenario-1(Android): When i choose an image file using the file chooser, i could get the original file name, size and type of the file.
Scenario-2(Android): When i choose a file other than image file like .pdf,.doc etc, i could not get the original file name and the type of the file. Suppose, i have choosen a file name "sample.pdf", but after i chose the file, i get the file name as a random number like 45675 and most importantly the file type, i got is empty.
Then, i researched in stackoverflow and saw these links (link1 and link2). It may be a security issue for android.
There is an ionic-native/file-chooser library but it is only for android platform.
Is there any way to force android to give the original file name?
Android does not give the original file name and file type using the above approach of mine and it is a security issue from android. So, i had to make below solution for retrieving the correct file name, file type, file size and the file data in base64.
You will need below four plugins:
FileChooser
File
FilePath
Base64
FileChooserAndroidProvider:
import {Injectable} from '#angular/core';
import {File, FileEntry, IFile} from "#ionic-native/file";
import {Base64} from "#ionic-native/base64";
import {FilePath} from "#ionic-native/file-path";
import {FileChooser} from "#ionic-native/file-chooser";
#Injectable()
export class FileChooserAndroidProvider {
constructor(private base64: Base64, private filePath: FilePath, private file: File, private fileChooser: FileChooser) {
}
getFileInfo(): Promise<any> {
return this.fileChooser.open().then((fileURI) => {
return this.filePath.resolveNativePath(fileURI).then((filePath) => {
return this.file.resolveLocalFilesystemUrl(filePath).then((fileEntry: FileEntry) => {
return new Promise((resolve, reject) => {
fileEntry.file(meta => resolve(meta), error => reject(error));
});
}).then((fileMeta: IFile) => {
return new Promise((resolve, reject) => {
return this.base64.encodeFile(filePath).then((base64Data) => {
resolve({
fileData: base64Data,
fileName: fileMeta.name,
fileSize: fileMeta.size,
fileType: fileMeta.type
})
}).catch((error) => {
reject(error);
})
})
});
});
});
}
}
FileChooserAndroidProviderModule:
import {NgModule} from '#angular/core';
import {Base64} from "#ionic-native/base64";
import {FileChooser} from "#ionic-native/file-chooser";
import {FilePath} from "#ionic-native/file-path";
import {File} from "#ionic-native/file";
#NgModule({
declarations: [],
exports: [],
providers: [
FileChooser,
File,
FilePath,
Base64
]
})
export class FileChooserAndroidProviderModule {
}
SamplePage:
constructor(private fileChooserAndroid: FileChooserAndroidProvider){}
uploadFileForAndroid(): void {
this.fileChooserAndroid.getFileInfo().then((result) => {
this.fileName = result.fileName;
this.fileData = this.sanitizeFileData(result.fileData);
this.fileSize = result.fileSize;
this.fileType = result.fileType;
}).catch((error) => {
this.helperProvider.createAlert('Alert', 'File can not be uploaded.');
});
}
SamplePageModule:
#NgModule({
declarations: [
SamplePage
],
imports: [
FileChooserAndroidProviderModule
],
providers: [
FileChooserAndroidProvider
]
})
export class SamplePageModule {
}
i know this link: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/#where-to-store-files
but i would like to save the file in Downloads directory. Is this possible to save the file in any path using Ionic? If so, please, share the example.
Here's the code:
downloadImage(image) {
this.platform.ready().then(() => {
const fileTransfer: TransferObject = this.transfer.create();
const imageLocation = `${cordova.file.applicationDirectory}www/assets/img/${image}`;
fileTransfer.download(imageLocation, cordova.file.externalDataDirectory + image).then((entry) => {
const alertSuccess = this.alertCtrl.create({
title: `Download Succeeded!`,
subTitle: `${image} was successfully downloaded to: ${entry.toURL()}`,
buttons: ['Ok']
});
alertSuccess.present();
}, (error) => {
const alertFailure = this.alertCtrl.create({
title: `Download Failed!`,
subTitle: `${image} was not successfully downloaded. Error code: ${error.code}`,
buttons: ['Ok']
});
alertFailure.present();
});
});
}
Basically I want save the file in location that is visible to the user.
the problem was lack of permission. Here is the working code that can download file to downloads directory:
async downloadFile() {
await this.fileTransfer.download("https://cdn.pixabay.com/photo/2017/01/06/23/21/soap-bubble-1959327_960_720.jpg", this.file.externalRootDirectory +
'/Download/' + "soap-bubble-1959327_960_720.jpg");
}
getPermission() {
this.androidPermissions.hasPermission(this.androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE)
.then(status => {
if (status.hasPermission) {
this.downloadFile();
}
else {
this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE)
.then(status => {
if(status.hasPermission) {
this.downloadFile();
}
});
}
});
}
To download the File to the Download directory you need to use Cordova File and FileTransfer Plugins.
import { File } from '#ionic-native/file';
import { FileTransfer } from '#ionic-native/file-transfer';
constructor(private transfer: FileTransfer) { }
fileTransfer: FileTransferObject = this.transfer.create();
//Use your File Url and name
downloadFile(file) {
// Some Loading
this.fileTransfer.download(url, this.file.externalRootDirectory +
'/Download/' + file).then(response => {
console.log(response);
this.dismissLoading();
this.presentToast('File has been downloaded to the Downloads folder. View
it..')
})
.catch(err => {
this.dismissLoading();
console.log(err)
});
}
Hope it helps.
import { File } from '#ionic-native/file';
import { FileTransfer } from '#ionic-native/file-transfer';
constructor(private file: File, private transfer: FileTransfer){}
let link = 'url_to_download_file';
let path = '';
let dir_name = 'Download'; // directory to download - you can also create new directory
let file_name = 'file.txt'; //any file name you like
const fileTransfer: FileTransferObject = this.transfer.create();
let result = this.file.createDir(this.file.externalRootDirectory, dir_name, true);
result.then((resp) => {
path = resp.toURL();
console.log(path);
fileTransfer.download(link, path + file_name).then((entry) => {
console.log('download complete: ' + entry.toURL());
}, (error) => {
console.log(error)
});
}, (err) => {
console.log('error on creating path : ' + err);
});
I know this is late, but I've always had issues with the FileTransfer plugin. Maybe it is just me. I've instead had success with the writeFile() method of the File plugin.
I'm still working on iOS, but for Android here is what I have:
import { File } from "#ionic-native/file";
constructor(private fileSystem: File) {}
Then, in whatever function you have the logic to save the file, we have:
let path = this.fileSystem.externalRootDirectory + '/Download/'; // for Android
let filename = 'myNewFile.pdf';
this.fileSystem.writeFile(path, filename, File, { replace: true }).then(() => {
this.toastCtrl.showToast('File has been downloaded. Please check your downloads folder.');
}, (err) => {
alert("Sorry. An error occurred downloading the file: " + err);
}
);
As I said, I'm still looking out for what path to use for iOS. And I'm still wondering how to pop up the notification that usually comes up when a download actually goes to the download folder. But at least I am able to save directly in the download folder of Android.
This code - ionic 3 capacitor - from josh morony takes a photo from the tmp directory and writes to the Document directory in this section using the FileSystem API the retrieves and manipulates the path
Filesystem.writeFile({
data: result.data,
path: fileName,
directory: FilesystemDirectory.Data
})
getFromPhotos() {
let options = {
resultType: CameraResultType.Uri
};
Camera.getPhoto(options).then(
(photo) => {
Filesystem.readFile({
path: photo.path
}).then((result) => {
// let date = new Date(),
// time = date.getTime(),
time = 'bilder',
fileName = time + '.jpeg';
Filesystem.writeFile({
data: result.data,
path: fileName,
directory: FilesystemDirectory.Data
}).then((result) => {
Filesystem.getUri({
directory: FilesystemDirectory.Data,
path: fileName
}).then((result) => {
console.log(result);
let path = result.uri.replace('file://', '_capacitor_');
this.image = this.sanitizer.bypassSecurityTrustResourceUrl(path);
}, (err) => {
console.log(err);
});
}, (err) => {
console.log(err);
});
}, (err) => {
console.log(err);
});
}, (err) => {
console.log(err);
}
);
}
In ionic 3 you have to use the cordova File plugin - please google. It is pretty straight forward to understand: you define the original directory where the file is, the original name of the file, the target directory, and a new name for the file inside that function. The principle is the same.
To download the File to the Download directory you need to use Cordova File Plugin:
import { File } from '#ionic-native/file/ngx';
constructor(
private file: File,
) { }
this.file.writeFile(this.file.externalRootDirectory + '/Download/', user_log.xlsx, blob, { replace: true })
.then(() => {
alert('File has been downloaded. Please check your downloads folder.')
enter code here
},
(err) => {
alert("Sorry. An error occurred downloading the file: " + err);
enter code here
});
})
It works in Ionic 4 as well.
I am very new to Ionic and Cordova, for the last couple of days I am trying to download an image that I have upload in firebase storage. I want to transfer the image and store it in my mobile device through my mobile application. I have installed all the plugins needed to do that. I have created two buttons. The first button is to display the image in my application and the second button is to download the image in my device. The source code for that is in my storage.html
<ion-header>
<ion-navbar>
<ion-title>storage</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click)="display()">Display</button>
<button ion-button (click)="download()">Download</button>
<img src="{{imgsource}}">
</ion-content>
The functionality is in my storage.ts
import { Component, NgZone } from '#angular/core';
import { NavController, Platform, AlertController } from 'ionic-angular';
//import {File,Transfer} from 'ionic-native';
import {FileTransferObject } from '#ionic-native/file-transfer';
import {TransferObject} from '#ionic-native/transfer';
import {Transfer} from '#ionic-native/transfer';
import {File} from '#ionic-native/file';
import firebase from 'firebase';
declare var cordova: any;
#Component({
selector: 'storage-home',
templateUrl: 'storage.html',
providers: [Transfer, TransferObject, File]
})
export class StoragePage {
storageDirectory: string = '';
fileTransfer: FileTransferObject;
nativepath: any;
firestore = firebase.storage();
imgsource: any;
constructor(public navCtrl: NavController, public platform: Platform, public alertCtrl: AlertController, public zone: NgZone) {
this.platform.ready().then(() => {
// make sure this is on a device, not an emulation (e.g. chrome tools device mode)
if(!this.platform.is('cordova')) {
return false;
}
if (this.platform.is('ios')) {
this.storageDirectory = cordova.file.documentsDirectory;
}
else if(this.platform.is('android')) {
this.storageDirectory = cordova.file.dataDirectory;
}
else {
// exit otherwise, but you could add further types here e.g. Windows
return false;
}
});
}
display() {
this.firestore.ref().child('image.jpg').getDownloadURL().then((url) => {
this.zone.run(() => {
this.imgsource = url;
this.fileTransfer.download(url,'image.jpg').then((entry) => {
console.log('download complete: ' + entry.toURL());
}, (error) => {
// handle error
});
})
})
}
downlad() {
this.firestore.ref().child('image.jpg').getDownloadURL().then((url) => {
this.zone.run(() => {
this.imgsource = url;
this.fileTransfer.download(url,cordova.file.dataDirectory +'image.jpg').then((entry) => {
console.log('download complete: ' + entry.toURL());
}, (error) => {
// handle error
});
})
})
}
}
The display button works perfectly as I can see my image when I install the application on my device. The problem though is with the download button as nothing is happening and I don’t know if it’s working as I can’t find my image anywhere in my device. Can anyone please guide me?
Thanks in regards
It looks like you may have a typo on your download function name. In the HTML module you refer to download() and in your code your function is labeled as downlad.
this is my code :
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { FileOpener } from 'ionic-native';
#Component({
selector: 'page-installHelper',
templateUrl: 'installHelper.html'
})
export class InstallHelper {
constructor(public navCtrl: NavController) {
FileOpener.open('assets/app.apk', 'application/vnd.android.package-archive').then(
function(){
console.log("success");
}, function(err){
console.log("status : "+err.status);
console.log("error : "+err.message);
});
}
}
but I can't access the file app.apk which is in assets/app.apk
and I get the error :
Status : 9
Error : File Not Found
is it even possible to access a file within the app folders ?
Well I did it by making the app get downloaded from a server to a local folder I created in the phone and install it immediately/automatically,
Here is the code in case someone else needed it one day :
import { Component } from '#angular/core';
import { Platform, LoadingController } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { FileOpener } from 'ionic-native';
import { File } from 'ionic-native';
import { Transfer } from 'ionic-native';
import { HomePage } from '../pages/home/home';
declare var cordova: any;
#Component({
template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
rootPage = HomePage;
constructor(platform: Platform, public loadingCtrl: LoadingController) {
let me = this;
platform.ready().then(() => {
let loading = me.loadingCtrl.create({
content: 'Preparing The App ...'
});
loading.present();
File.createDir(cordova.file.externalDataDirectory, "appFolder", true).then(function(link){
const fileTransfer = new Transfer();
let url = 'http://yourserverhere.com/app.apk';
fileTransfer.download(url, cordova.file.externalDataDirectory +"appFolder/app.apk").then((entry) => {
loading.dismiss();
FileOpener.open(entry.toURL(), "application/vnd.android.package-archive").then(
function(){
console.log("success");
},function(err){
console.log("status : "+err.status);
console.log("error : "+err.message);
});
}, (error) => {
console.log(error);
});
},function(error){
console.log(error);
});
StatusBar.styleDefault();
Splashscreen.hide();
});
}
}
Any explanation just ask me.
Well since you want the user to download the .apk file, you could use (in your html)
<a href="assets/app.apk" download>Download apk</a>
But the user will have to manually open his downloads (or tap the popup) to install your app.
I do not know if there is a plugin which is capable of installing these apk files. (Googling for ionic 2 install external apk didn't return any results).