I'm using Ionic native image picker: https://ionicframework.com/docs/native/image-picker/
I'm importing on my module
import { ImagePicker } from '#ionic-native/image-picker';
And adding on the module's providers
ImagePicker,
On my page I'm importing it
import { ImagePicker, ImagePickerOptions } from '#ionic-native/image-picker';
Adding to my constructor
private imagePicker: ImagePicker,
Then calling a method on a button
async pickImageFromGallery() {
try {
const [imageSource] = await this.imagePicker.getPictures(this.pickerOptions);
this.imgSrc = imageSource;
It does work and I can get the file URI, however when I try to display on an <img> tag the image doesn't show up
<img src="{{ imgSrc }}" alt="" />
Do I need to configure some permission or something? Why doesn't the image show up?
Instead of this.imgSrc = imageSource; I did
this.imgSrc = imageSource.replace('file://', '');
Works on both iOS and Android.
If you run into problems like Android crashing try this:
First I cleaned my project
# rm -rf
rimraf .sourcemaps node_modules platforms plugins www
Then installed packages
npm i
Then deploy the app again
ionic cordova run android --device
You have to add "" in your src
<img src="{{ imgSrc }}" alt="" />
Related
I have tried out this tutorial to develop an android application via Cordova and Framework7. It works in the browser and also Android Emulator (ADK). I converted the project to the apk with Cordova build command and transferred the apk file to my device.
The application works, however, the list which is the application based Framework7 (indeed on Vue) does not show anything. It looks like Vue not initialized.
Here is the HTML code:
<template id="page-alt-sayfa">
<f7-page>
<f7-navbar title="Alt Sayfa" back-link="Geri" sliding></f7-navbar>
<f7-block-title>
<!-- sayfa id'sini data obj içinde ara-->
{{this.$root.$data['icerik'][$route.params['sayfaId']].baslik}}</p>
</f7-block-title>
<f7-block-title>Dondurucuya Konur mu?</f7-block-title>
<f7-block inner>
<img style="width:95%;overflow:hidden" :src="'./img/sembolik/'+$route.params['sayfaId']+'.png'"/>
<br>
<div v-if="this.$root.$data['icerik'][$route.params['sayfaId']].dondurucu">
<div class="chip">
<div class="chip-media bg-green"><i class="material-icons">dns</i></div>
<div class="chip-label">Dondurucuya Konulur</div>
</div>
</div>
Here is initializing Framework7 and Vue:
...
<script src="cordova.js"></script>
<script src="js/framework7.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/framework7-vue.min.js"></script>
<script type="text/javascript" src="js/data.json"></script>
<script src="js/app.js"></script>
</body>
</html>
Here a screenshoot from my phone.
(source: ultraimg.com)
How can the problem be solved?
Edit:
Here is my router code:
// Init F7 Vue Plugin
Vue.use(Framework7Vue)
// Init Page Components
Vue.component('page-about', {
template: '#page-about'
})
Vue.component('page-form', {
template: '#page-form'
})
Vue.component('page-dynamic-routing', {
template: '#page-dynamic-routing'
})
Vue.component('page-alt-sayfa', {
template: '#page-alt-sayfa'
})
// Handle device ready event
// Note: You may want to check out the vue-cordova package on npm for cordova specific handling with vue - https://www.npmjs.com/package/vue-cordova
document.addEventListener('deviceready', () => {
console.log("DEVICE IS READY!");
}, false)
// Init App
new Vue({
el: '#app',
// Init Framework7 by passing parameters here
framework7: {
root: '#app',
/* Uncomment to enable Material theme: */
// material: true,
routes: [
{
path: '/about/',
component: 'page-about'
},
{
path: '/alt-sayfa/:sayfaId/',
component: 'page-alt-sayfa'
}
]
},
data: {
mesaj: 'Merhaba',
icerik: icerik
}
});
I recently faced a similar problem. The routing was working well when tested my computer browser and emulator. But when I built the apk, it just did not work. It turned out I had a case sensitivity issue with the names of the views in my code. My computer and emulator ignored it and did the routing, but my phone didn't.
Have you crossed-checked the spelling of the names of your views to make sure it is not a case-sensitivity issue?
I do not find the where is the problem stems from. However, I find a npm template and reorganized my code according to this template and it worked
Template is:
https://framework7.io/vue/templates.html
I installed it with this command:
cordova create <project_create_dir> [com.example.projectname] [ProjectClassName] --template cordova-template-framework7-vue-webpack
I have a iOS and Android application, and I load a external website inside my app (this external website is mine too).
My problem is that this website has a file upload feature and this feature does not work on Android (it works on iOS).
I saw that this behavior is normal on Android, but is there any way to make it work or it's definitely not an option ?
Thank you
EDIT 1
I tried to create a new app with a simple page like this (hosted on AWS) :
<html>
<head>
<title>Upload Test !</title>
</head>
<body>
<div>Upload Test</div>
<div>
<input type="file" id="imgFile" name="files[]" accept="image/x-png, image/gif, image/jpeg">
</div>
</body>
and I added this script in my generated index.html in my Cordova project.
<script type="text/javascript">
document.addEventListener("deviceready", function(event) {
console.log('TEST CONSOLE LOG !');
var url = 'https://s3-eu-west-1.amazonaws.com/***/file-upload.html';
ref = window.open(url, "_blank", "location=no,toolbar=no,zoom=no,hidden=yes");
ref.addEventListener('loadstop', function () {
ref.show();
});
ref.addEventListener('loaderror', function () {
ref.close();
ref = undefined;
});
}, false);
</script>
It doesn't work on my nexus 5 (android M).
There's an issue with both Android and iOS that prevents file uploads when clicking on a file input tag like this within the inappbrowser:
<input type="file">
There's a couple of fixes for both which I've consolidated into a single location to make it easy for anyone else facing this issue. You should be able to modify your config.xml file to use it by including this:
<plugin spec="https://github.com/jverlee/cordova-plugin-inappbrowser-camera.git" version="1.1.0" source="git" />
Instead of the default inappbrowser plugin.
More details can be found here:
https://github.com/jverlee/cordova-plugin-inappbrowser-camera
#Verl's code is pretty good! However, it cannot be installed through his installation guide... So here is mine:
cordova plugin remove cordova-plugin-inappbrowser-camera
cordova plugin add https://github.com/jverlee/cordova-plugin-inappbrowser-camera.git
By the way, if I follow his guide, I only gets:
Error: Cannot read property 'variables' of undefined
I am newbie in Phonegap.
I did installed latest version of phoneGap app for MAC OSX.
Below is version detail.MAC OSX PhoneGap App version detail :.
I did cerated New PhoneGap project. Now i wants to use cordova-plugin-qrcode in my PhoneGap project.
I am confused it with few days.
I tried many steps for it, But having no success yet :(
I installed below with CLI:
node -v -- v6.1.0
phonegap -v -- 6.2.2
npm -v -- 3.8.6
cordova -v -- 6.1.1
I did add package.json file in my project directoey.Then i applied npm install qrcode-reader command on my Terminal. So node_modules folder created in my project directory. Displaying node_modules hierachy
Then i edited my config.xml file for add below PlugIn tag :
<plugin name="qrcode-reader" source="npm" spec="~0.1.1" />
Now, In my index.html i gave reference for plugin by add below script :
<script type="text/javascript" src="../node_modules/qrcode-reader/dist/browser.js"></script>
Now , In index.js, i did use it according to plugin suggest by below code :
$(document).ready(function(){
var QrCode = require('qrcode-reader');
var qr = new QrCode();
qr.callback = function(result) { console.log(result) }
});
But whenever i run this project i got below error :
ReferenceError: require is not definedvar
var QrCode = require('qrcode-reader');
Though i did search on web till last few days, didn't get any success.
Please help me with this.
Correct me if there any conceptual mistakes.
Thanks !
I am new to Ionic and I am trying to upload an image taken from camera that is stored in Android filesystem:
var ft = new FileTransfer();
console.log('Uploading: ' + fileURL);
ft.upload(fileURL,
encodeURI("http://192.168.192.62:3000/api/meals/picture"),
pictureUploaded,
function(error) {
console.err(error);
$ionicLoading.show({template: 'Ooops error uploading picture...'});
setTimeout(function(){$ionicLoading.hide();}, 3000);
},
options);
var pictureUploaded = function() {
console.log('uploaded!');
$ionicLoading.hide();
};
fileUrl is pointing to an existent image: file:///data/data/com.ionicframework.nutrilifemobile664547/files/Q2AtO1462636767466.jpg
In chrome://inspect/#devices console I get the following error and it looks like because of the error the FileOptions are also not properly sent, this is the error (Not allowed to load local resource):
Cordova version: 6.1.1
Ionic version: 1.7.14
This happens when you use the "livereload" option with Ionic.
Try running in normal mode
With ionic webview >3.x, you have to use convertFileSrc() method.
For example if you have a myURL local variable such as file:// or /storage.
let win: any = window; // hack ionic/angular compilator
var myURL = win.Ionic.WebView.convertFileSrc(myURL);
Another possible reason is that you have a webview plugin installed (like https://github.com/ionic-team/cordova-plugin-ionic-webview or just https://github.com/apache/cordova-plugin-wkwebview-engine). Also this will not allow to use cdvfile:// protocol as well.
It might be too late but... you could convert native path to blob using File then convert blob to URL using URL.createObjectURL(blob) and passing/setting as src to your html element. This is unnecessary for production environment but you could use it for development with -lc. It might work
07-Dec-2018
This is the version where it works for me on Ionic 3.9.2 app.
Remove the latest version of webview and then:
i.e. ionic cordova plugin add cordova-plugin-ionic-webview#1.2.1
https://github.com/ionic-team/cordova-plugin-ionic-webview/releases/tag/v1.2.1
Note: This version works fine with normalizeURL() method.
I am new to cordova-android app development.I am using cordova 3.3.0 to create Android phonegap SpeechRecognizer application. I referred SpeechRecognizer. According to that i have executed below commands to create cordova android platform app.
1) cordova create SpeechrecognizerApp
2) cordova platform add android
3) phonegap local plugin add https://github.com/mayurloved/speechrecognizer.git
Afer that i imported that project in eclipse and it automatically created all required packeges and made all changes in config.xml. Then i copied all html contents of example page to my index.html file. All is done properly, but when i run my app, log shows error:
Uncaught TypeError: Cannot read property 'speechrecognizer' of undefined:20
index.html
<!DOCTYPE html>
<html>
<head>
<title>Speech Recognition plugin demo</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="SpeechRecognizer.js"></script>
</head>
<body>
<script type="text/javascript">
function onDeviceReady(){
console.log("Device is ready");
}
function recognizeSpeech() {
var maxMatches = 5;
var promptString = "Speak now"; // optional
var language = "en-US"; // optional
window.plugins.speechrecognizer.startRecognize(function(result){
alert(result);
}, function(errorMessage){
console.log("Error message: " + errorMessage);
}, maxMatches, promptString, language);
}
// Show the list of the supported languages
function getSupportedLanguages() {
window.plugins.speechrecognizer.getSupportedLanguages(function(languages){
// display the json array
alert(languages);
}, function(error){
alert("Could not retrieve the supported languages : " + error);
});
}
document.addEventListener("deviceready", onDeviceReady, true);
</script>
<button onclick="recognizeSpeech();">Start recognition</button>
<button onclick="getSupportedLanguages();">Get Supported Languages</button>
</body>
</html>
I haven't copied SpeechRecognizer.js in www folder as according to above link i don't require to copy it in my app because i am using cordova version >3.0. Please help me to solve this problem.
Thank you.
Did you launch phonegap build android after you add the plugin? When you install plugins, they are installed only in the /plugins folder of the project but not in the platform folder.
You have to run phonegap build or phonegap prepare for any platform to have the plugin fully installed.
And then after you can refresh the project in eclipse and you should see the java part of the plugin in the /src folder and the javascript in /assets/www/plugins
If the folder platforms\android\assets\www\plugins... is not there after the build, that may be because your project got corrupted.
In that case you can try to empty the plugins folder at the root of your project and re-install all plugins.
If that's not enough, you can retry emptying both platforms and plugins folder (think to save any customisation you may have done in platforms folders).