I am working on React-Native mobile app and I need to handle pdf file coming from the server. The idea is when the user clicks on button, a request to the server is made and a pdf file is returned. My question is how to download and parse this file and show it to the user?
You can do it in app BUT you are going to have a lot of pain, especially with android devices.
My advice is using the Linking api and open a webbrowser:
https://facebook.github.io/react-native/docs/linking
The idea is to check if your url contains a .pdf. You can use a mix of:
https://lodash.com/docs/#includes
https://lodash.com/docs/#filter
https://lodash.com/docs/#split
When you are sure that your url is a pdf, you can use:
Linking.openURL(url);
Related
I am trying to implement something in react native:
I have a url of video which i'm showing in react native video component, how can i give a button to download that same video in mobile but it should not appear in gallery.
Also if the video is private where the headers can be passed and how?
How to download any file ?
Well for downloading any file like video,img you first need permission to read and write into internal/external storage of phone and after that you need a native module that can download files from server to the local folders of phone.
there are two best known libraries for downloading files
https://www.npmjs.com/package/react-native-fs
https://www.npmjs.com/package/react-native-fetch-blob
Now you can follow their documentation to download files like Videos,images or whatever you want to your user's phone.
Now Lets come to the part that you dont want it to be available to user via gallery.
For this i suggest using react-native-fetchblob as it has builtin intent actions and views.
You can download a video file with any random name like 1234CACHE any random name without any extension to it, specially dont give it extension like video.mp4 because gallery detects .mp4 files so dont give it any extension and the file won't be available in any gallery.
Now how to hide the file?
react-native-fetch-blob allow us to save files into directories that are not publicly available i mean user cannot reach those directory and these directories are used only for saving App's data so you can save your video file in one of these directories.
Now after completing your download, You can open your file with the Intent.
For Example:-
const VIDEO_PATH = res.path() //the path where your downloaded video is saved, you will actually receive this in the response of download function.
const MIME_TYPE = "video/mp4"
//Now finally call the intent with video mime so the video will be opened in user's media player, or if you want your own media player you can use any library for that.
android.actionViewIntent(VIDEO_PATH , MIME_TYPE)
Note: You can only download a video if you have a path URL to the video file, You must not mix web URL with Video File URL, Video file url has file name and video extension at the end of the url. such as https://someURL.com/video.mp4 this is video file url, but if you have something like https://SomeURL.com/video it is not a video file instead it is a webpage displaying that video file so you cant really download that specific video from a webpage!.
There can be multiple approaches to this.
I hope you have an idea about your video player, download option depends on your server and site.
You can change the file extension of downloaded video, like my_video.notMP4. So the video will not show in the Gallery as it not detected as a video file now.
Hide the folder where the video file is downloaded, adding a dot(.) before the folder name can hide the folder in Android/Unix and video will be hidden from Gallery. Example .my_Video_folder
For more safety, you can encrypt the video and make them in custom chunk which only your player can play. But you may need to make or find such a video player.
I could not understand the headers part, please explain.
I have written a webservice which is sending me excel file from server to download, I have a mobile Application written in React-Native and I want to download that file in my mobile application,
I tested my webservice in browser I am able to download the file, but how to do that in react-native.
My RestAPI accept some parameter in request and in return it will download the file.
I have tried rn-fetch-blob and react-native-fs but they gives are using direct path to download the image in my case my api is providing me the file.
I have search a lot but couldn't find anything related.
Can anyone help me how to implement in this in react-native.
I am exporting crytsal report to pdf format and saving the pdf on azure cloud. This code is written in web api. I am also able to download the pdf on client. Is there any way with which I can open this saved pdf file on client side by either using server side code or using jQuery. I just want to keep the file open for the user to view.
Maybe you can have a link point to the PDF file address with response header "response-content-disposition": "inline; filename=this.pdf", "response-content-type": "application/pdf". Then I think the browser will launch proper PDF plugin to show it.
I have posted some other smaller questions regarding the problem I describe below and got some feedback but now I will try to explain it in more depth hoping to get through the problem.
I built a desktop application using JavaFX 2.2 which uses a WebEngine to access a website built using Oracle ADF Pages. The application tracks the users actions on the pages and stores data to a database. All fine so far until the point where I need show a PDF file on a user click.
On the actual website the user clicks a button and a new popup window opens up that displays the PDF.
My problem is that due to the lack of PDF support in JavaFX I cannot display the pdf. The actual link to the PDF is dynamic and it doesn't have a .pdf at the end of it so I can't use the actual URL to send it to an external bowser or something to display it. Additionally the connection is secure so I can't open the URL with Chrome for example.
Possible solutions I thought about are to read the binary data of the response from WebView and create the PDF file locally and then open it using Adobe of Chrome or something. Is that possible at all?
Another solution I thought about (while I am writing this question) is maybe to open the URL which the users default browser but how can I go about sending the secure connection cookie from the application to the browser.
Is any of the above even possible? Am I missing something?
Any help, clues, links, ideas would be very much appreciated.
Thanks
I think the best way to do what you want is to download the PDF and display it locally.
Downloading using WebView sounds like it could work but I'm not familiar with the user experience. As an alternative try using curl or wget. You can pass in the authorization cookie to those tools and use them to download the file
I'm building an app that comunicate with a Web Service and I'm trying to download files from it.
I found that, after sending an appropriate request to the server, if the link of the UIWebView contains "DownloadFolder", that's the correct download link; sending an async request with that url the download works well for files like .pdf .doc .xls and so on..
The problems came when i send a request for a media file like mp3 mov and so. The webview work well and display the player, but I can't get the url from the webview.
I also noticed that in the consolle is displayed a line like this:
setting movie path: http://xxx.xxx.xxx.xxx/WEBSERVER/DownloadFolder/NAMEOFWEBSERVER/ADMIN/FA29-12-2011-12-57-04-163pitorb45sluo0g455wwc3u55.mp3
That's the URL I want to use for the download. How can i get it from code?
Thanks in advance.