I am using this code and it works fine in simulator as I am getting a location and can get pdf file from there
async createPDF() {
let options = {
html: '<h1>PDF TEST</h1>',
fileName: 'test',
directory: 'Documents',
};
let file = await RNHTMLtoPDF.convert(options)
// console.log(file.filePath);
alert(file.filePath);
}
But the above code problem in the real iOS mobile as it is saving the pdf file somewhere. I don’t know where but I am not able to see that file in my mobile. So can anyone tell me how can I save my file in the downloads or documents in the iOS . So that I can see the downloaded file.
Found the answer to convert file in base64 string
You can solve this issue by using base64 as the following:
let options = {
html:
`
<h2 style="text-align: center">${'Some text and dynamic value'}</h2>
`,
fileName: 'TestingPDF',
directory: 'Documents',
base64: true
};
let file = await RNHTMLtoPDF.convert(options);
You shoud use 'react-native-file-access' to copy the file and move it to Downloads directory, so let's install it by: npm i react-native-file-access --save
Lets copy the file to the Downloads directory by the following:
const fileName = 'PMA_CurrentBalanceFile.pdf'; //whatever you want to call your file
const filePath = `${Dirs.DocumentDir}/${fileName}`;
const base64Data = file.base64; //our base64 encode file which done by RNHTMLtoPDF;
Then write the following code to do your job:
if (Platform.OS === 'android') {
const permissionGranted = await permissionWriteExternalStorage();
if (permissionGranted) {
await FileSystem.writeFile(filePath, base64Data, 'base64');
if (!FileSystem.exists(filePath)) return;// check to see if our filePath was created
await FileSystem.cpExternal(filePath, fileName,'downloads');// copies our file to the downloads folder/directory
// file should now be visible in the downloads folder
ToastAndroid.show("", "One File Downloaded", ToastAndroid.SHORT);
}
return;
}
if (Platform.OS === 'ios') {
// IOS version
await FileSystem.writeFile(filePath, base64Data, 'base64');
Alert.alert('', 'One File Downloaded');
}
Related
I use flutter_downloader in app to allow downloading pdf files .
It is working well in Android,but in IOS,the notification of starting downloading the file doesn't appear although the file downloaded in the device.
I followed all instructions like described from Enable background mode,Add sqlite library,Configure AppDelegate
code:
final status = await Permission.storage.request();
if (status.isGranted) {
// Directory _path = await getExternalStorageDirectory();
// String _localPath = _path.absolute.path + Platform.pathSeparator + 'ESPRS_Docs';
var savedDir;
if (Platform.isIOS) {
savedDir = await getApplicationDocumentsDirectory();
} else {
savedDir = Directory('/storage/emulated/0/Download');
// Put file in global download folder, if for an unknown reason it didn't exist, we fallback
// ignore: avoid_slow_async_io
if (!await savedDir.exists()) savedDir = await getExternalStorageDirectory();
}
String random_no =randomAlphaNumeric(6) ;
var split_name=p_title.replaceAll(" ","-");
await FlutterDownloader.enqueue(
url: p_link,
savedDir: savedDir.path,
fileName: "${split_name}-${random_no}.pdf",
showNotification: true,
saveInPublicStorage: true,
openFileFromNotification: true,
headers: {"auth": "Downloader"},
);
}else {
print("Permission deined");
};
Notification messages of download progress are only shown for Android. Behaviour differs between platforms.
final taskId = await FlutterDownloader.enqueue(
url: 'your download link',
savedDir: 'the path of directory where you want to save downloaded files',
showNotification: true, // show download progress in status bar (for Android)
openFileFromNotification: true, // click on notification to open downloaded file (for Android)
);
I've downloaded a video to disk but it won't initialise using Video Player (https://pub.dev/packages/video_player).
final future = Downloader.shared
.getVideoPathFor(
url: url,
themeName: themeName,
)
.then(
(value) {
dLog('file path: $value');
final file = File(value);
final videoController = VideoPlayerController.file(file);
return videoController.initialize().then(
(value) {
dLog('video controller initialized');
return videoController;
},
);
},
);
It downloads the file fine and the file path becomes something like:
Application/9E6FD935-A424-4C1E-99CC-D5834448E45E/Library/Caches/videos/Clean water/clean_water_video.mp4
So I know the file exists and I can see it in Finder if I run this on Simulator.
If I use VideoController.contentUri() then it appears to work but it tells me I'm not allowed to use that on iOS and I can only use it on Android.
I know I can use VideoController.network() but I can't keep downloading the same video over and over across multiple screens like this.
What am I doing wrong?
Even when I do load the video like this (which I got from this video: https://youtu.be/uz4xRnE-UIw?t=596):
final filePath =
"<path>/Caches/videos/Clean water/clean_water_video.mp4";
final file = File(filePath);
controller = VideoPlayerController.file(file)
..addListener(() {
setState(() {});
})
..setLooping(true)
..initialize().then((value) {
controller.play();
});
the initialise never happens.
It turns out that it can't load a file if folders have spaces in the name.
I want the user to be able download images from the project /assets folder into an external publically accessible folder. This works fine on Android but in iOS everything saves under the app's unique ID directory so not sure if this possible. Essentially I want the user to save a photo from inside the app and then be able to open it easily from within their phone's default Photos app.
With the final photoPath var in the code below I can display the image in a <img tag using the DomSanitizer. Though still not sure how to make the file accessible on the user's system from outside the app.
this.http.get('/assets/img/' + item.img, { responseType: 'blob' })
.subscribe(res => {
const reader = new FileReader();
reader.onloadend = () => {
var base64data = reader.result;
await Filesystem.appendFile({
data: base64data.toString(),
path: item.file,
directory: FilesystemDirectory.Documents
})
const finalPhotoUri = await Filesystem.getUri({
directory: FilesystemDirectory.Documents,
path: item.file
});
let photoPath = Capacitor.convertFileSrc(finalPhotoUri.uri);
console.log("Photo Path: ", photoPath);
}
reader.readAsDataURL(res);
console.log(res);
});
I implemented a Jersey REST service to download the zip file.
Now, I would like to use axios in front end to download the zip file.
Everything is fine in PC Chrome but when tried with Safari on iPad it opens a tab with name "unknown".
I have searched some articles and mentioned that this may related to IOS safari compatibility.
e.g. https://caniuse.com/#feat=download
However, I also want know if there is any method to show the downloaded file as "file.zip" for safari.
Below is my code
Backend:
#GET
#Path("/getTestingReport")
#Produces("application/zip")
public Response getTestingReport() throws Exception {
// set file (and path) to be download
File file = new File("C:/Users/abc/Desktop/test.zip");
ResponseBuilder responseBuilder = Response.ok((Object) file);
responseBuilder.header("Content-Disposition", "attachment; filename=\"MyJerseyZipFile.zip\"");
return responseBuilder.build();
}
Frontend:
axios.get("report/getTestingReport").then((response) => {
console.log("response", response)
var blob = new Blob([response.data], { type: "application/zip" });
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'file.zip');
document.body.appendChild(link);
link.click();
}).catch((error) => {
console.error("error response", error.response)
});
May I have any suggestion?
I'm doing some image manipulation on ios on react-native.
The problem is one of the libraries I'm using only supports absolute paths, but I only have the file-asset uri.
Example
I have:
assets-library://asset/asset.HEIC?id=CE542E92-B1FF-42DC-BD89-D61BB70EB4BF&ext=HEIC
I need:
file:///Users/USERNAME/Library/Developer/CoreSimulator/Devices/########-####-####-####-############/data/Containers/Data/Application/########-####-####-####-############/Documents/########-####-####-####-############.jpg
Is there any way to easily get the image absolute path?
This is what I ended up doing, based on #ospfranco's answer.
I saved a copy of the asset on the temp folder. Also included a little snippet to generate a random string for the file name.
import RNFS from 'react-native-fs';
getAssetFileAbsolutePath = async (assetPath) => {
const dest = `${RNFS.TemporaryDirectoryPath}${Math.random().toString(36).substring(7)}.jpg`;
try {
let absolutePath = await RNFS.copyAssetsFileIOS(assetPath, dest, 0, 0);
console.log(absolutePath)
} catch(err) {
console.log(err)
}
}
So, the reason why you only get an url is because it image might not be stored on the device (it could be on iCloud). iOS silently downloads the asset for you once you do any operation on it.
That will not help you if you are really trying to manipulate the image from your react-native code though, so here is one workaround:
import RNFS from 'react-native-fs';
getAssetFileAbsolutePath = async (assetPath) => {
const dest = `${RNFS.TemporaryDirectoryPath}${Math.random().toString(36).substring(7)}.jpg`;
try {
let absolutePath = await RNFS.copyAssetsFileIOS(assetPath, dest, 0, 0);
} catch(err) {
// ...
}
}
Bare in mind this copies the file to a temporary directory which means it is not permanent, you can also copy it to your application's document directory.
I got it to work using RNFS, but I had to add a little 'extra' to the uri path to get it to work.
<TouchableHighlight
onPress={async () => {
const destPath = RNFS.CachesDirectoryPath + '/MyPic.jpg';
try {
await RNFS.copyAssetsFileIOS(imageUri, destPath, 0, 0);
console.log('destPath', destPath);
} catch (error) {
console.log(error);
}
navigation.navigate('SelectedPicture', {
uri: 'file://' + destPath,
});
}}>
<Image source={{uri: imageUri}} style={styles.image} />
</TouchableHighlight>
The question is old but i answer it to help people like me, new in react-native, having the same issue.
i were struggling with it trying to get the images from the cameraroll and process them with an OCR library. I was using react-native-photo-framework to get the images and i found that you can get fileurl using the method getImageMetadata with the assets. I need this fileurl because the original URI that has the format 'photo://...' wasn't being recognized as a valid URL for the OCR Library. I haven´t tested it with real devices and with iCloud assets yet. Example:
const statusObj = await RNPhotosFramework.requestAuthorization()
if (statusObj.isAuthorized) {
const assetList = await RNPhotosFramework.getAssets({
includeMetadata: true,
includeResourcesMetadata: true,
fetchOptions: {
mediaTypes: ['image'],
sourceTypes: ['userLibrary', 'cloudShared', 'itunesSynced'],
}
})
const asset = photos.assets[0]
const metadata = await asset.getImageMetadata()
const uri = metadata.imageMetadata.fileUrl
}