Download m3u8 using Using react-native-fs in react native - react-native

I have m3u8 url link and i want to download stream using download url but not able to download it the complete folder
const destination_url = RNFS.LibraryDirectoryPath + "filelink"
const dnd_url = url
RNFS.downloadFile({
fromUrl: dnd_url,
toFile: destination_url
}).promise.then(res => {
if (res.statusCode == 200) {
}
})
But not getting that how i will get full folder in my storage. Let me know if anybody have a good idea about it.

Related

React Native Expo - how to get local uri to user's media library from image picker

I can't find how one would get (using expo packages) the local uri like file:///storage/emulated/0/DCIM/Camera/... from user picking an image from their media library without having to re-save/duplicate the image.
This gives me a paginated structure of user's photos and contains the uri I'd expect:
await MediaLibrary.getAssetsAsync({
mediaType: [
'photo',
],
});
However that does not open the media library, what does is:
await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePickerExpo.MediaTypeOptions.Images,
presentationStyle: 0,
});
However uri here is something like file:///data/user/0/host.exp.exponent/cache/... which looks to me like an uri to a temporary cache, not the permanent uri to the local file.
Is there a way how to get the permanent media library uri from the image picker?
(Without having to basically create your own gallery and picker using the getAssetsAsync() ?
This is my code! so help you!
if (Platform.OS === 'ios') {
const info = await MediaLibrary.getAssetInfoAsync(item.id)
const uri_local = info.localUri;
item.uri = uri_local;
console.log("test image: ", info)
}
else if (Platform.OS === 'android')
{
}

Upload Video URI from React-Native Picker to AWS S3 Server

I am trying to upload a video from my IOS device library to S3 using axios and a pre-signed url. I've determined the axios/s3 part is working great, but the issue is coming from the uri I receive from 'react-native-image-picker'.
When I record a video in react-native the video uri uploads fine in S3, but when I grab a video from my photo library it uploads to S3 but it's not a video file.
I grab the video uri from my ios device library using react-native-image-picker.
import {launchImageLibrary} from 'react-native-image-picker';
launchImageLibrary({mediaType: "video"}, ({assets}) => {
let {uri} = assets[0] //uri = /var/mobile/Containers/Data/Application/123/tmp/IMG_1779.mov
uploadFile(uri)
});
and then I attempt to upload the uri to S3
//save to s3 using presignedPost
uploadFile(uri){
var formData = new FormData();
...
formData.append("file", { uri });
await axios.post(presignedPost.url, formData,{ 'Content-Type': 'multipart/form-data' } )
}
The function is successful, but when I look in AWS the file is just a text file with a bunch of random characters.
The good news is this same exact uploadFile functions works if I record a video with react-native-camera
import { RNCamera } from 'react-native-camera';
stopRecord(){
let camera = cameraRef.current //grab camera <RNCamera ref={cameraRef} />
let {uri = null} = await camera.recordAsync(); //uri = /var/mobile/Containers/Data/Application/123/Library/Caches/Camera/123.mov
uploadFile(uri)
}
The only difference I can see is the uri after recording a video is stored in cache. Therefore, I attempted to use 'react-native-fs' to grab the picker uri, save it to cache, and then upload the cached file but I got the same error (file uploads to s3 but not a video).
import * as RNFS from 'react-native-fs';
uploadFileTwo(uri){
let base64Data = await RNFS.readFile(uri, 'base64')
let cachePath = RNFS.CachesDirectoryPath + "/" + fileName + ".mov"
await RNFS.writeFile(cachePath, base64Data, 'base64')
var formData = new FormData();
...
formData.append("file", { uri: cachePath });
await axios.post(presignedPost.url, formData,{ 'Content-Type': 'multipart/form-data' } )
}
So now I am out of options. Why would the 'react-native-camera' uri work great, but the 'react-native-image-picker' uri doesn't?
Have a try by following the Tutorial for uploading video file.
I think this tutorial meets all your requirements as it uses react-native-image-picker to upload the video file(s).

converting selected document from DOCUMENT PICKER in react native to base64 using RNFetchBlob

I have some problem about my react native app. I would just like to ask if are there any ways that RNFetchBlob will accept a dataURI from documentPicker instead of a web URL? I just need to convert the selected file from document picker to base64. Could anyone help me?
RNFetchBlob.config({ fileCache: true })
.fetch("GET", 'http://www.africau.edu/images/default/sample.pdf') // Replace the web URL to dataURI from documentPicker
// the image is now dowloaded to device's storage
.then(resp => {
// the image path you can use it directly with Image component
// return resp.readFile("base64");
return resp.readFile("base64");
}).then(base64Data => {
console.log('base64Data', base64Data);
});
If you are not particularly looking for base64 encoded but want to obtain the actual blob you can use fetch without going through base64 bridge
const fetchResponse = await fetch(at[i].uri);
const blob = await fetchResponse.blob();

How to display Image from camera roll url using react-native-camera?

I use react-native-camera for capturing images and saving them in cameraRoll (CaptureTarget) for iOS devices, on capture I get image path in the following form
"assets-library://asset/asset.JPG?id=8B55D3E5-11CE-439A-8FC6-D55EB1A88D7E&ext=JPG"
How to use this path to display the image in Image component (from react-native)?
Previously I was using disk as CaptureTarget option, and I was able to show that image url Image component but now the requirements are to save image in camera roll?
I have used RNFetchBlob to get base64 from "assets-library://.." url, my capture function is
this.camera.capture()
.then((data) => {
// console.log(data);
RNFetchBlob.fs.readFile(data.path, 'base64')
.then((base64data) => {
let base64Image = `data:image/jpeg;base64,${base64data}`;
this.props.addImagesToUntagged(data.path);
})
})
after that i give user some in-app functionality on this base64 data and finally when I need to send this to s3 server, I use axios & RNFetchBlob to send this data.following code gives me signed url for s3
axios.get(ENDPOINT_TO_GET_SIGNED_URL, {params:{'file-name': file.name,'file-type': file.type,"content-type": 'evidence'}})
.then(function (result) {
// console.log(result);
returnUrl = result.data.url;
var signedUrl = result.data.signedRequest;
return uploadFile(file,signedUrl)
})
and in my uploadFile function i upload images through following code
RNFetchBlob.fetch('PUT', signedUrl,
{'Content-Type' : file.type},
RNFetchBlob.wrap(file.uri)
)
.then(resolve)

can't pass JWT in RNFS in react-native

I am using RNFS with PDFView to display PDF.
I am trying to download a pdf file from website which have JWT authentication, request is going but there is authentication issue, it is giving 403 response.
I am doing it as follows,
var pdfPath=this.pdfPath;
alert(pdfDownloadURL)
var DownloadFileOptions={
fromUrl: pdfDownloadURL, // URL to download file from
toFile: pdfPath, // Local filesystem path to save the file to
headers: {'Authorization' : DEMO_TOKEN} // An object of headers to be passed to the server
}
RNFS.downloadFile(DownloadFileOptions).then(res => {
alert(res)
this.setState({isPdfDownload: true});
}).catch(err => {
alert(err);
this.props.navigator.pop
});
Please help me finding solution. thanks in advance.