We are web developers and it is first time for us to make react webview project.
And it is first time for our Android developer, as well.
So we have faced a problem about receiving file from Android.
Although I added input tag(type="file") and Android developer did something for sending file, our team only can receive filepath(file uri).
The path is like this via javascript function↓
file:///storage/emulated/0/Download/download.jpeg-15.jpg
Here is simple part of my javascript code↓
...
// function part
const handleClickAddBtn = () => {
e.preventDefault();
(window as any)?.MobileBridge.test();
}
const handleChangeFileTest = e => {
console.log('[handleChangeFileTest] e: ', e);
}
useEffect(() => {
if (typeof window !== undefined) {
window!.receiveFileFromAndroid = (param) => {
console.log("param: ", param, typeof param);
};
}
}, []);
.
.
.
// html part
<div className="_btnBox">
<input
ref={inputFileRef}
type="file"
onClick={handleClickAddBtn}
onChange={handleChangeFileTest}
/>
</div>
[additional code comments about ours]
1. A function MobileBridge.test is for opening android bottom sheet.
Our Android developer said "you should call it when you want to open window that for selecting camera or gallery".
So we call it in input click event.
2. A function receiveFileFromAndroid is for getting file information.
It also maden by Android devleoper.
Since We expect we get file object via the function, we only could get the file path.
We are actually not sure whether calling position is right or not.
Because most of searching results are for android developer, we actually don't know how to handle both of MobileBridge.test and receiveFileFromAndroid on web side.
How can we get file object not a file path?
If you know the good way, please let me know.
Thank you.
