Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Opening a local file href in webview #7955

Closed
bnns opened this issue Jun 6, 2016 · 10 comments
Closed

Opening a local file href in webview #7955

bnns opened this issue Jun 6, 2016 · 10 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@bnns
Copy link

bnns commented Jun 6, 2016

Platform
RN 0.26
iOS and Android
Mac OSX

My application allows users to download documents to their phone's Documents/ folder using react-native-fs - but I'm unable to open these downloaded files. I have tried rendering <a href="..."></a> tags with the following formats

file:///path/file.pdf
/path/file.pdf
../path/file.pdf

Nothing happens when I press the link. I'm thinking maybe the path returned by RNFS.DocumentDirectoryPath is not correct, although when I paste this path into a browser (on my desktop running the simulator), I am able to get to the file.

Edit: I am able to open the file using a Webview with a source={{uri: ...}} prop though. I suppose I could launch a new webview each time a user launches something which should be render-able. But this doesn't solve cases of files that need some type of native app.

2nd Edit: source={{uri:...}} doesn't work for PDFs in android, but works in iOS.

@charpeni
Copy link
Contributor

charpeni commented Jun 7, 2016

Does it work in debug mode but not in release ? Could be related to #7924.

@bnns
Copy link
Author

bnns commented Jun 7, 2016

It doesn't work in debug mode. I'm not sure what is considered "root" from the webview's perspective. The files I'm trying to access are in (when you adb shell into android) /data/data/com.myapp/files and /data/user/0/com.myapp/files - I display a <a href="/data/data/com.myapp/files/something.pdf"></a> in the webview. When the link is pressed, the page goes blank (implying that it is loading?) and nothing else happens.

@bnns
Copy link
Author

bnns commented Jun 8, 2016

Figured it out after reading @grokbot's comment in itinance/react-native-fs#49 - you have to use ExternalDirectoryPath (file:///storage/emulated/0/Android/data/com.myapp/files/...). It seems the document directory has some permissions issues.

@bnns bnns closed this as completed Jun 8, 2016
@npomfret
Copy link
Contributor

I don't fully understand the solution here, could you elaborate?

I'm unable to load a pdf into a web view in android, its just blank, with no error messages. I've tried an http://... url and a content://... style url - but both have the same issue.

@grokbot
Copy link

grokbot commented Jul 28, 2016

is the location of the file on http:// or are you using react-native-fs? The reference above was using a file:// url retrieved from react-native-fs ... not sure what ramifications there are for WebViews

@npomfret
Copy link
Contributor

The urls I've got are http://... url and a content://.... Neither work

@wuno
Copy link

wuno commented May 31, 2017

I have searched all over for an answer to this question. Have any of you solved this?

To be clear if we were facing the same issues,

I am rendering a web application through a web view. The loaded web page has a login form. Once the user logs in there is a download link which when clicked should download a .txt file to the user's phone. But when the user clicks the download link nothing happens.

Does anyone have any information on how to solve this problem?

I need the download link to download the file to the users phone.

@andrelimawork
Copy link

convert it to base64 and inject it in the webview...

@wuno
Copy link

wuno commented Jun 15, 2017

Thanks, we ended up doing it natively with Swift and Android.

@Stophface
Copy link

This might help: #505 (comment)

@facebook facebook locked as resolved and limited conversation to collaborators Jun 8, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 19, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

8 participants