I am making a simple app on iOS. Upon clicking a button I want the gallery or file chooser or file explorer to open, and for the user to be able to select any .txt or .pdf, .jpg or .png file from gallery.
So I want to know how to open file explore in the Ionic Framework. Is there any plugin available in Ionic or Cordova that opens the file explore and uploads to to a server? I don't want to use the email composer plugin.
You could try a simple HTML5 file input:
<input type="file">
this should open the native browser on iOS or Android and allow you to select any kind of file. For uploading, you could try the $cordovaFileTransfer plugin.
If you're targeting iOS8, which appears to have issues with the file input, I'd suggest you check out FineUploader, a JS solution.
Alternatively, you can use ngCordova's $cordovaImagePicker and $cordovaFileTransfer plugins. Install ngCordova first with Bower or include the JS files manually and inject ngCordova as an Angular dependency. Then, install the plugins with:
cordova plugin add https://github.com/wymsee/cordova-imagePicker.git
cordova plugin add cordova-plugin-file-transfer
Then, you can use the getPictures() method and the upload() methods to select photos on the device and upload them to your server. However, you won't be able to select and upload other kinds of files formats .txt or .pdf because $cordovaImagePicker only picks images
For catch the image from the gallery device you could this plugin:
$ImagePicker.
After googling a bit, i have found this plugin cordova-plugin-file-opener2, i think this one could help you to get a file stored on the device.
For the download and upload i have already used this one: $cordovaFileTransfer
Related
This is what I implemented:
downloadFile=(file)=>{
var element=document.createElement('a');
element.style.display= "none";
element.setAttribute('href', file.fileUrl)
element.setAttribute("target", "_blank");
document.body.appendChild(element)
element.click()
document.body.removeChild(element)
}
This is working fine for .ai files but not for .pdf or .jpeg. Instead of downloading the file, the browser opens it in a separate window. I want to enable download file feature and not open file. How do I fix this issue? Is there an alternative way to download the file from url from browser?
Try to use download attribute instead of href.
See element a DOC.
PrintJs package is also not working. if there is any other way either by some package or downloading the file to local storage of browser Do suggest.
I'm creating an app with ionicframework. I want that the user can downolad pdf files which are in the app. In which folder i must place the files, in template folder? How can the user download the files, i must use < a ui-sref="file.pdf" >< /a >?
Thank you.
If your PDF files are in the application, you could save them in temporary filesystem and after open with default app (move them).
To get access to the device’s files and directories, you need work with plugin $cordovaFile (http://ngcordova.com/docs/plugins/file/). Here you will find the file system layout.
To open a file on your device with its default application use $cordovaFileOpener2 (http://ngcordova.com/docs/plugins/fileOpener2/)
I'm trying don't move file.
I used InAppBrowser plugin (in ionic 2 project) and i have a 'a.pdf' file in 'www' folder. i use this code:
In .js file:
> openURL(url) {
> InAppBrowser.open(url,'_system','location=yes'); }
In .html file:
<button (click)="openURL('a.pdf')">Open pdf
</button>
When i press on button the device ask me to select a program to open file, then i select adobe reader pdf. But adobe reader pdf tells me 'impossible to load file ...'.
What is the right path (url) to call openURL(url)?
Thank you.
I am developing an app for ipad using
ionic framework
I am stuck at one point were
i want to open a PDF file using inappbrowser from an local folder
So that the user can read the PDF internally. The PDF is kept in local folder were my HTML file is available and i am trying to open it through below code:
window.open('pdf-sample.pdf', '_blank', 'location=yes');
But the issue is when i am trying to open it i am
not able to view/read the PDF file
It shows me the white blank screen with no content in it.
Screenshot:
What should i do to resolve this issue?
-thanks
The code looks ok. Try to open https://www.google.com/. If that works than the path to pdf is not correct.
Are you sure you try to open after deviceready ?
I know it would be great if the file wouldn't link to local resource, but using phonegap/steroids framework, FILE_URI returns "file:///Users/" path which I can use for uploading to S3 or else, but Angular won't show it in the template.
Is there a possible solution? I tried adding config to my app
.config(function ($compileProvider){
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})
but it seems that doesn't have impact on the error.
I can base64 encode my images (then works), but I would like to avoid this if possible.
thanks
See the Camera example in the Steroids Kitchensink app, where the Cordova File API is used to move the picture from the tmp folder to the Steroids app's User Files folder. Since Steroids's localhost looks for assets both in the App folder and User Files folder, you can use an absolute path, e.g. src="/my_image.png". See also the App Structure on Device guide for more information on the App and User Files folder.