my code in angular is:
async downloadFilm() {
if (confirm(this.filmData.filmTitel + ' herunterladen?')) {
if(this.api.getIsWeb()){
this.api.downloadFilm(parseInt(this.filmData.id)).subscribe(async data => {
console.log(data)
let fileName = this.filmData.filmTitel + '.mp4';
saveAs(data, fileName);
})
} else {
this.api.downloadFilm(parseInt(this.filmData.id)).subscribe(async data => {
//TODO Android Download
});
}
} else {
alert('Download abgebrochen');
}
}
i tryed using this in the place of //TODO Android Download
const fileName = this.filmData.filmTitel + '.mp4';
const fileContent = data;
await Filesystem.writeFile({
path: fileName,
data: fileContent,
directory: Directory.Documents,
encoding: Encoding.UTF8
}).then(() => {
alert('File saved');
}).catch(err => {
alert(err);
});
but when i use alert to show the error on the phone, it said "Error: "Filesystem" plugin is not implemented on android".
is there any way i can download a mp4 file to an android 12 phone using both angular and capacitor?
I'm making a function to save a file downloaded from a server via expo-file-system.
In this code, when you click the download button on Android, the file selection UI appears, and when you select a file, the file is downloaded. However, I want files to be automatically downloaded in a specific directory without user selection, like a normal application.
When using requestDirectoryPermissionAsync, is it possible to directly download a file to a specific path without SelectionUI? If StorageAccessFramework doesn't have such a way, is there a way to solve this problem in expo-file-system?
code
import * as FileSystem from "expo-file-system";
const { StorageAccessFramework } = FileSystem;
const saveAndroidFile = async (fileUri, fileName, contentType) => {
try {
const fileDir = StorageAccessFramework.getUriForDirectoryInRoot("Download");
// This function calls the UI in the image below
const permissions = await StorageAccessFramework.requestDirectoryPermissionsAsync(fileDir);
if (!permissions.granted) {
return;
}
try {
await StorageAccessFramework.createFileAsync(fileDir, fileName, contentType)
.then(async (uri) => {
await FileSystem.writeAsStringAsync(uri, fileString, { encoding: FileSystem.EncodingType.Base64 });
alert("Report Downloaded Successfully");
})
.catch((e) => {
console.log(e);
});
} catch (e) {
throw new Error(e);
}
} catch (err) {}
};
Folder SelectionUI, which opens whenever requestDirectoryPermissionAsync is called
I'm using Firestore v9 within Expo/React Native. I use XMLHttpRequest to convert a base64 image into a blob file. Then I send/upload that blob file to Firebase Storage. It works perfectly with iOS but not with Android. In Android it returns {istrusted: false}, like the network request is not sent or something went wrong during converting the base64 image into a blob file.
I tried to use react-native-fetch-blob library as mentioned here but it's not supported by Expo.
This is my code:
const getBlob = async (photo) => {
return await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function () {
resolve(xhr.response);
};
xhr.onerror = function (e) {
console.log("consoleloge",e);
reject(new TypeError("Network request failed"));
};
xhr.responseType = "blob";
xhr.open("GET", photo, true);
xhr.send(null);
});
}
const upload64BaseImage = async (photo, newDocRef) => {
try {
const blob = await getBlob(photo)
const imageRef = ref(storage, `images/${newDocRef}.jpg`);
const metadata = {
contentType: "image/jpeg",
};
const snapshot = await uploadBytes(imageRef, blob, metadata);
const downloadUrl = await getDownloadURL(snapshot.ref);
return downloadUrl;
} catch (error) {
console.log(`error`, error.message);
}
};
The following code works correctly for image files. But when I'm trying to save PDF file or other not-media formates, I get Could not create asset error.
I understand that expo-media-library is designed to work with media format files.
Is there any alternative for expo-media-library to save other files formats?
import * as FileSystem from 'expo-file-system'
import * as Permissions from 'expo-permissions'
import * as MediaLibrary from 'expo-media-library'
const downloadFile = async (uri: string) => {
const targetUri = FileSystem.documentDirectory + getFileName(uri)
const downloadedFile = await FileSystem.downloadAsync(uri, targetUri)
if (downloadedFile.status === 200) {
if (Platform.OS === 'android') {
const permission = await Permissions.askAsync(Permissions.MEDIA_LIBRARY)
if (permission.status !== 'granted') {
return
}
const asset = await MediaLibrary.createAssetAsync(downloadedFile.uri)
const album = await MediaLibrary.getAlbumAsync('Download')
await MediaLibrary.addAssetsToAlbumAsync([asset], album, false)
}
}
}
it works on android device with https://docs.expo.dev/versions/latest/sdk/filesystem/#storageaccessframeworkcreatefileasyncparenturi-string-filename-string-mimetype-string
import * as FileSystem from 'expo-file-system';
import { StorageAccessFramework } from 'expo-file-system';
const permissions = await StorageAccessFramework.requestDirectoryPermissionsAsync();
if (!permissions.granted) {
return;
}
try {
await StorageAccessFramework.createFileAsync(permissions.directoryUri, fileName, 'application/pdf')
.then((r) => {
console.log(r);
})
.catch((e) => {
console.log(e);
});
} catch((e) => {
console.log(e);
});
My pdf is well downloaded !
In my case i had to generate the file from a base64 string.
My code :
import * as FileSystem from 'expo-file-system';
import { StorageAccessFramework } from 'expo-file-system';
const permissions = await StorageAccessFramework.requestDirectoryPermissionsAsync();
if (!permissions.granted) {
return;
}
const base64Data = 'my base 64 data';
try {
await StorageAccessFramework.createFileAsync(permissions.directoryUri, fileName, 'application/pdf')
.then(async(uri) => {
await FileSystem.writeAsStringAsync(uri, base64Data, { encoding: FileSystem.EncodingType.Base64 });
})
.catch((e) => {
console.log(e);
});
} catch (e) {
throw new Error(e);
}
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.