I'm trying to display a downloaded pdf inside a WebView. I'm using react-native-webview (https://github.com/react-native-community/react-native-webview) and rn-fetch-blob to download it.
Basically i have a render that's just a WebView component:
if(this.state.path)
return
<WebView
source={{ uri: this.state.path }}
style={{ flex: 1 }}
/>
else return <Loader />
This component won't get rendered until the PDF is downloaded. After the download is complete i save the path into the state and show the WebView.
The PDF is downloaded correctly, i can manually go to the path i get in the state and open the PDF.
If i put the URL where i download the pdf from inside the uri like this (as example this is the google policy):
source = {{ uri : "https://static.googleusercontent.com/media/www.google.com/it//intl/it/policies/privacy/google_privacy_policy_it.pdf" }}
It works correctly and displays the pdf inside the WebView.
If i put my path to the pdf doing :
source = {{ uri : path/to/file.pdf}}
I get a blank screen.
Is there a way to display a file system pdf into the WebView ?
Note that i need to use the WebView, react-native-pdf and react-native-pdf-view are not the solution
After some tries i found a solution that let me download the PDF trough a fetch and use the local path to display the PDF. Basically when downloading i had to give the saved file a path .pdf and add the props useWebKit and originWhitelist.
<WebView
source={{ uri: this.state.path }}
style={{ flex: 1 }}
originWhitelist={["*"]}
useWebKit
/>
When i fetched trough rn-fetch-blob I had to specify a path in the fetchConfig and use the path property.
path: path/to/download/dir/file.pdf
Use something like
source={require('path of your local html file')}
instead of
source = {{ uri : path/to/file.pdf}}
NOTICE: On the iOS platform, the directory path will be changed every time you access the file system. So if you need to read the file on iOS, you need to get dir path first and concat file name with it.
let arr = fileResp.uri.split('file://');
PATH_TO_THE_FILE = arr[1];
Reference to Source
Related
------------ORIGINAL QUESTION------------------
In my Splash Script, I am trying to use "splash:go" on a new url that is based on the "src" attribute of an "img" tag. How can I access this "src" relative url and join it to a start_url?
For example, imagine that the img element has the following contents:
<img id="ImageViewer1_docImage" onload="BlockerResize('ImageViewer1_ContentBlocker1','ImageViewer1_WaterMarkImage');" src="ACSResource.axd?SCTTYPE=ENCRYPTED&SCTKEY=gMYed5OWqcT9I1Y2fM85DvB48X5U1DQ5mOUiJoUH4rioyau0nJdxt0PHFfGVTMiUsork/YD+Cw0F6ZzcviP4sG09xrqWM8/zJlyEeVRFkKXVnkyHYWgwNJzCSUE4Kh4yCsqw6mCuIxWxPj6BAI7Hbw==&CNTWIDTH=849&CNTHEIGHT=684&FITTYPE=Height&ZOOM=1" alt="Please wait" style="border-width:0px;cursor: url(images/Cursors/hmove.cur); z-index: 1000">
Here I am trying to extract the src attribute and add it to start_url:
https://i2a.uslandrecords.com/ME/Cumberland/D/
I want all of this inside the Splash script. I need it to be done inside of Splash because otherwise I lose my security/encryption or something--it renders "Bad Data" instead of the new webpage. Do you have any recommendations?
------------UPDATE------------------
So I managed to obtain the url I needed from the src attribute using the following code:
var = splash:evaljs("document.getElementById('ImageViewer1_docImage').src;")
splash:go(var)
However, the problem is that this is producing a error message. All I find in the snapshot is a white page with the following message:
Failed loading page (Frame load interrupted by policy change)
https://i2a.uslandrecords.com/ME/Cumberland/D/ACSResource.axd?SCTTYPE=ENCRYPTED&SCTKEY=gMYed5OWqcSvEWOJA6wGVmb642s2oZHqkYmT6VTpORTzMY7CgvDU5jsjJG/xp0X3eQ9BiDnbaTdAmISeLkC3hyjxGjcSnXOKgGDa8cI2fniY0ILT+NqvQToMGIB+/X3ZIs7Q+D4ppTSZGYZ2L4M/
Webkit error #102
Any idea why?
The image src attribute is exactly the URL you need to access or as stated by the question title you need to append it to some other URL parts?
If that is the case, you can do it by '..'
Ex.: splash:go(base_url..var) -- concatenation
ISSUE RESOLVED:
Here is the solution. The GET request was breaking down because it didn't know how to render the image in html given the webkit settings. If you execute the GET request without rendering the page, the response.body has the image.
CODE:
local response = splash:http_get(var)
return {
body = response.body
}
If we want to use an image in React-Native js from Images.xcassets, we simply provide the image name as URI - for eg.
<Image style = {styles.someStyle} source = {{uri:'addImage.png'}}>
But what if we have a custom created .xcassets ? How can that imageset be accessed from the RN js ?
It's considered as legacy code, but can be imported like:
<Image source={require('image!custom')} />
I have to download images to my iOS apps local file system and read them back.
On my simulator I can see file system of my app with directories
/Library/Developer/CoreSimulator/Devices/[UUID]/data/Containers/Data/Application/[UUID]/
/Documents
/Library
/tmp
To try out I copied foo.png to /Documents folder and then tried
<Image source={{uri: "file://Documents/foo.png"}} style={{width:100, height:100}}/>
This does not work, any idea whats a way to do this.
This also took me ages... with better info it would have been 5 minutes!
I use react-native-fs to get directories (which works for ios and android):
var RNFS = require('react-native-fs');
RNFS.DocumentDirectoryPath then returns something like '/var/mobile/Containers/Data/Application/15AC1CC6-8CFF-48F0-AFFD-949368383ACB/Documents' on iOS
My Image element looks like:
<Image
style={{width:100, height:100}}
source={{uri: 'file://' + RNFS.DocumentDirectoryPath + '/myAwesomeSubDir/my.png', scale:1}}
/>
My problem was that I did not set width and height first, which is not needed for urls or paths to assets. When using a base64 uri the width and height are also mandatory (that actually led me to the solution!).
Try tilda (~). React Native should expand that.
<Image
style={{width:100, height:100}}
source={{uri: '~/Documents/myAwesomeSubDir/my.png', scale:1}}
/>
I'm trying to organize some local html files and display them using native.showWebPopup() in my Corona app. Testing on an Android device.
Right now if I put an html file directly in my main directory, I'm able to display it.
Example that works:
local options =
{
baseUrl = system.ResourceDirectory
}
native.showWebPopup("index.html",options )
However, I want to put the index.html file somewhere else. For example, in a subfolder called foo. But the app doesn't find it when I put it there. I've tried a number of different things.
Some examples that don't work:
local path = system.pathForFile( "foo/index.html", system.ResourceDirectory )
native.showWebPopup(path)
local path = system.pathForFile( "foo/", system.ResourceDirectory )
local options =
{
baseUrl = path
}
native.showWebPopup("index.html",options)
I've tried printing the path to the device log, but I'm not sure if it's what it should be or not...looks like this:
/data/data/(my app info)/files/coronaResources/foo/index.html
I can only assume that I'm pointing the app to the wrong place for the file, but I'm not sure how to fix it. Thanks for any help on this.
Also, even in the example that works above, the HTML document loads, but the images are giving me trouble...even if I put them in the same main directory. Is there something I need to do to fix that path? This didn't work:
<img border="0" src="./myimage.jpg" width="100" height="100">
and neither did this
<img border="0" src="myimage.jpg" width="100" height="100">
This seems to be working for locating/opening the html files.
local doc = "foo/index.html"
local options =
{
baseUrl = system.ResourceDirectory
}
native.showWebPopup( doc, options )
When you insert an image into a TWebBrowser in edit mode, how do you get the filepath of the inserted image? When an image is inserted it includes the full path to the image in the html source, but in my case I need to modify the html source to only include the filename.
EDIT:
This is the html source after the image is inserted:
<IMG border=0 hspace=0 alt=delphi align=baseline
src="C:\Images\delphi.bmp">
I need to change
<IMG border=0 hspace=0 alt=delphi align=baseline
src="C:\Images\delphi.bmp">
to
<IMG border=0 hspace=0 alt=delphi align=baseline
src="HTML\delphi.bmp">
Yes I can get the path from the html but I'd like to try to copy the image file to the HTML folder then change the path to the HTML folder after the image is inserted without parsing the html. If the filepath can be obtained after the image is inserted I can add the code to copy the file to the HTML folder so that the image appears in the webbrowser with the new path...
Have you tried using the browser's DOM interfaces to read the src attribute and update it to what you want? Specifically, look at the src property of the IHTMLImgElement interface.