This is a homework type question, please help as I'm new on react-native.
In react-native, I'm using react-native-document-picker, from the code in readme:
selectFiles = () => {
try {
DocumentPicker.pickMultiple({
type: [DocumentPicker.types.allFiles],
}).then((results) => {
console.log(result[0].uri);
}
});
} catch (err) { }
};
It provides me with an URI, how can convert that into path and read data of that file ?
Here is my solution :
var RNFS = require('react-native-fs');
...
RNFS.readFile(results[0].uri)
.then((file) => {
that.setState({code: file});
})
.catch((error) => console.log('err: ' + error));
Related
https://obikes.page.link/d6o5/?ref=10959bc
I am using axios this is my invite link in my app i want to get data after query string i need ref code ref=10959bc ,how can i get this query data 10959bc in react native
i am unable to find any solution
React.useEffect(async () => {
const getValue = await AsyncStorage.getItem('token');
await getReferal().then(response => {
console.log(response.data.refferalUrl); //https://obikes.page.link/d6o5/?ref=10959bc
// refer code
})
.catch(error => {
console.log(error);
});
A pure JS approach:
React.useEffect(async () => {
const getValue = await AsyncStorage.getItem('token');
await getReferal().then(response => {
console.log(response.data.refferalUrl);
// refer code:
const url = response.data.refferalUrl
let regex = /[?&]([^=#]+)=([^&#]*)/g, params = {}, match;
while ((match = regex.exec(url))) {
params[match[1]] = match[2];
}
console.log(params) // => {ref: "10959bc"}
})
.catch(error => {
console.log(error);
});
Use the qs npm package to get the query string params from a string.
https://github.com/ljharb/qs
My Question is similar to this which doesn't have an answer. I tried to search many other places but still don't have an answer.
I'm trying to download file using Axios in VueJs as a blob:
return new Promise((resolve, reject) => {
Axios.get(`${fileDownloadUrl}`,
{ responseType: 'blob' } // Blob doesn't handle errors
).then(response => {
let byteData = response.data
var blob = new Blob([byteData], {type: response.headers['content-type']})
let fileName = _.split(response.headers['content-disposition'], '=')
FileSaver.saveAs(blob, fileName[1])
resolve(fileName[1])
},
error => {
console.log(error.response.data) // returns Blob - error message from service is not handled
reject(error.response.data)
}
)
I removed the { responseType: 'blob' } from the above code and tried again, I get the error message now but the file downloaded doesn't have any content, it's a blank data.
How do I download the file and handle the error response returned by the service?
Using vue-resource solved this issue. Although it will be retiring in future releases, I couldn't find a better way to do it as Axios was not able to handle it.
Following is the code:
main.js
import VueResource from 'vue-resource'
Vue.use(VueResource)
service.js
return new Promise((resolve, reject) => {
VueResource.http.get(`${fileDownloadUrl}`,
{ responseType: 'blob' }
).then(response => {
methods.downloadFile(response, cid)
resolve(cid)
}, error => {
reject(error)
})
})
Hope this helps.
import axios from "axios";
// It is needed to handle when your response is not Blob (for example when response is json format)
axios.interceptors.response.use(
response => {
return response;
},
error => {
if (
error.request.responseType === 'blob' &&
error.response.data instanceof Blob &&
error.response.data.type &&
error.response.data.type.toLowerCase().indexOf('json') != -1
) {
return new Promise((resolve, reject) => {
let reader = new FileReader();
reader.onload = () => {
error.response.data = JSON.parse(reader.result);
resolve(Promise.reject(error));
};
reader.onerror = () => {
reject(error);
};
reader.readAsText(error.response.data);
});
}
return Promise.reject(error);
}
);
// Now you can get response in both Blob and json format
axios.get(
url,
{
responseType: 'blob'
}
).then(response => {
// Your Code
}).catch((error) => {
// Your Code
// You can get error in json format
});
May I know is it possible to use post instead of get in the following request
Axios.get(${fileDownloadUrl},
{ responseType: 'blob' }
I am looking for a file picker in react-native which returns me Absolute Path of the file picked. I am currently using react-native-document-picker, but it gives me the relative path in the format of content://com.android.providers.media.documents/document/....... As I want to compress my video file, libraries like react-native-ffmpeg and react-native-video-processing require Absolute path of a file.
I actually figured this out myself. You can get Absolute path in 3 ways.
The most convenient way : Use react-native-document-picker, on selection it will give you a Relative path, something like this content://com.android....... Pass that Relative path to Stat(filepath) function of the react-native-fetch-blob library. The object will return absolute path. Append the path with file:// to use it for further operations.
The other 2 ways are by using react-native-image picker and CameraRoll (React Native Library)
I hope this helps !
Edit:
Please make sure you run the app on hardware device rather than Virtual Device to test it.
Install react-native-fetch-blob to get the path of the file.
Below is an example.
pickFile = async () => {
try {
const res = await DocumentPicker.pick({
type: [DocumentPicker.types.allFiles],
});
console.log(res.uri);
//output: content://com.android.providers.media.documents/document/image%3A4055
RNFetchBlob.fs
.stat(res.uri)
.then((stats) => {
console.log(stats.path);
//output: /storage/emulated/0/WhatsApp/Media/WhatsApp Images/IMG-20200831-WA0019.jpg
})
.catch((err) => {
console.log(err);
});
} catch (err) {
if (DocumentPicker.isCancel(err)) {
} else {
throw err;
}
}};
First you have to ask for Android Permissions so make sure you call this function first:
export const requestReadExternalStorage = () => {
PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE);
};
After you call this function and Permissions are accepted you can pass the uri to this function:
export const getPath = (uri: string) => {
if (uri.startsWith('content://')) {
return RNFetchBlob.fs.stat(uri).then(info => info?.path);
}
return uri;
};
Then you just need to call it and use the real uri now, like this:
// res?.uri is the uri returned from the DocumentPicker.pick() response.
const uri = await getPath(res?.uri);
You may forget to request proper permissions for that like so (andriod only):
export async function requestStoragePermission() {
if (Platform.OS !== "android") return true
const pm1 = await PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE);
const pm2 = await PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE);
if (pm1 && pm2) return true
const userResponse = await PermissionsAndroid.requestMultiple([
PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
]);
if (userResponse['android.permission.READ_EXTERNAL_STORAGE'] === 'granted' &&
userResponse['android.permission.WRITE_EXTERNAL_STORAGE'] === 'granted') {
return true
} else {
return false
}
}
Try this, maybe it will help you https://www.npmjs.com/package/react-native-file-share-for-android
But its support only for Android
const uploadDocunment = async finalSubmit => {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
{
title: 'Storage Permission',
message: 'App needs access to memory to download the file ',
},
);
if (granted != PermissionsAndroid.RESULTS.GRANTED) {
ToastAndroid.showWithGravity(
'You need to give storage permission to download the file',
ToastAndroid.SHORT,
ToastAndroid.BOTTOM,
);
return false;
}
try {
DocumentPicker.pick({
type: [DocumentPicker.types.plainText],
}).then(res => {
RNFetchBlob.fs.readFile(res.uri, 'utf8').then(text1 => {
ToastAndroid.showWithGravity(
'Docunment is Ready!',
ToastAndroid.SHORT,
ToastAndroid.BOTTOM,
);
});
});
} catch (err) {
if (DocumentPicker.isCancel(err)) {
ToastAndroid.showWithGravity(
'File not Selected',
ToastAndroid.SHORT,
ToastAndroid.BOTTOM,
);
} else {
throw err;
}
}
};
uploadDocunment();
};
I am using RNFetchBlob to share image as base64 format. But the image is downloading in my local folder. I want to delete it. By my research knowledge i want to unlink the image path. I don't know how to do that. Here is my code
_downloadImageAndShare(url ,title, message) {
const { fs } = RNFetchBlob.fs;
const self = this;
RNFetchBlob.config({ fileCache: true })
.fetch('GET', url)
.then(resp => resp.readFile('base64')
.then(base64 => ({ resp, base64 })))
.then(obj => {
const headers = obj.resp.respInfo.headers;
const type = headers['Content-Type'];
const dataUrl = 'data:' + type + ';base64,' + obj.base64;
return { url: dataUrl, title, message };
})
.then(options => Share.open(options)).catch(err => {err &&
console.log(err); })
}
how to use this code inside this method
RNFetchBlob.fs.unlink(path)
.then(() => { ... })
.catch((err) => { ... })
and how to specify the unlink(path) ??
thanks in advance.
You can specify file location with config with path param.
const filePath = RNFetchBlob.fs.dirs.DocumentDir + '/myFile';
RNFetchBlob.config({ fileCache: true, path : filePath })
.fetch('GET', url)
.then(resp => resp.readFile('base64')
.then(base64 => ({ resp, base64 })))
.then(obj => {
const headers = obj.resp.respInfo.headers;
const type = headers['Content-Type'];
const dataUrl = 'data:' + type + ';base64,' + obj.base64;
return { url: dataUrl, title, message };
})
.then(options => Share.open(options)).catch(err => {err &&
console.log(err); })
}
Then you can call unlink like this
RNFetchBlob.fs.unlink(filePath)
.then(() => { ... })
.catch((err) => { ... })
How do we implement caching in react-native-video? Basically, when a video is currently streaming from a network resource, how do we save the video somewhere, and then retrieve it when the same resource is access. What is the best approach for this?
The best approach that i would refer you is using react-native-fetch-blob, you can implement it like this:
const RNFetchBlob = require('react-native-fetch-blob').default;
const {
fs
} = RNFetchBlob;
const baseCacheDir = fs.dirs.CacheDir + '/videocache';
//call the downloadVideo function
downloadVideo('http://....',baseCacheDir)
//Function to download a file..
const activeDownloads = {};
function downloadVideo(fromUrl, toFile) {
// use toFile as the key
activeDownloads[toFile] = new Promise((resolve, reject) => {
RNFetchBlob
.config({path: toFile})
.fetch('GET', fromUrl)
.then(res => {
if (Math.floor(res.respInfo.status / 100) !== 2) {
throw new Error('Failed to successfully download video');
}
resolve(toFile);
})
.catch(err => {
return deleteFile(toFile)
.then(() => reject(err));
})
.finally(() => {
// cleanup
delete activeDownloads[toFile];
});
});
return activeDownloads[toFile];
}
//To delete a file..
function deleteFile(filePath) {
return fs.stat(filePath)
.then(res => res && res.type === 'file')
.then(exists => exists && fs.unlink(filePath)) //if file exist
.catch((err) => {
// swallow error to always resolve
});
}
Cheers:)