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
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 am working on an application, and I am facing a problem with Ionic1 , and it concerns opening a .PDF from an external URL in Android with Ionic.
I tried many solutions given in this site and other sites but in vain.
this is an example of what I have tried:
in .html file:
<a class="item" href="#" onclick="window.open('http://www.xxx.pdf', '_system', 'location=yes')">
in .js file:
var ref = window.open('http://www.xxx.pdf', '_blank', 'location=yes');
can you suggest other solutions please?
You could use the cordova inapp browser plugin.
you can replace all window.open by inappBrowser;
window.open = cordova.InAppBrowser.open;
or you can just use:
cordova.InAppBrowser.open('http://linktopdf.pdf', '_blank', 'location=yes');
or if you use ngCordova, you can use $cordovaInAppBrowser,
$cordovaInAppBrowser.open('http://www.xxx.pdf', '_blank', options)
take a look here: http://ngcordova.com/docs/plugins/inAppBrowser/
I have a basic Cordova application with a simple console.log() function at the end.
My index.html file looks as follows:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("Device is ready!");
}
</script>
</body>
</html>
As you can see it's basically the same as the automatically generated file with some console.log script at the bottom.
Unfortunately when I run the app on Android using cordova emulate android, I cannot seem to find the output from console.log(..) anywhere. However, it works fine on browsers.
console.log(..)only works on browser console, not on command line.
To get log that appears on your app use alert(...);.
Anyway if you wanted to see your logs by consol.log() you should use an IDE like Android Studio or use ddms located where your adb is installed. (run ddms.bat)
Use
cordova plugin add cordova-plugin-console
This plugin will enable console logging.
It has various methods for console printing
console.log
console.error
console.exception
console.warn
console.info
console.debug
console.assert
console.dir
console.dirxml
console.time
console.timeEnd
console.table
By default plugin is not installed so you will have to add it manually.
Reference.
Regards.
I am looking for an HTML 5 video plugin for PhoneGap.
I found a plugin at GitHub but there maybe something wrong as I have the following issues:
I don't know where to place the plugin.xml
I don't know how to to link with it <video> tag
and it's not working with PhoneGap
this javascript function now
function start(){
window.plugins.html5video.initialize({"video1" : "movie.mp4"});
window.plugins.html5video.play("video1");
}
04-24 09:52:59.305: E/Web Console(740): Uncaught TypeError: Cannot call method 'initialize' of undefined at file:///android_asset/www/index.html:44
After several attempts I solved this way:
I have installed Git
I have installed the plugin HTML5Video for Cordoba with command cordova plugin add https://github.com/jaeger25/Html5Video.git (with this command, the project has run automatically configured to use the plugin)
I created the folder platforms\androis\res\raw\ where I copied the video splash.mp4
In the html file (in my case \www\splash.html) I insert this code in HEAD:
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="Html5Video.js"></script>
<script>
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
window.plugins.html5Video.initialize({
"splashvideo" : "splash.mp4"
})
window.plugins.html5Video.play("splashvideo");
}
</script>
and this is the BODY code
<body onload="onLoad()">
<video id="splashvideo" autobuffer controls="false"></video>
</body>
It's work for me ;)
I am trying to use the PhoneGap Share plugin for 2.0 version. I have implemented it but this is not work properly.
This plugin is written in PhoneGap 1.0 and later version any new or updated plugin for share message on Facebook.
I've referred to this documentation and this question: How to implement facebook send, twitter share, send sms, send email in my phonegap android application?
But still not getting proper solution.
I am sharing my code which is working fine.
Please refer This link for share plugin functionality and follow below given steps.
1- Place the JS file in the same folder of the MainActivity.java folder.
2- Place the Js file in the www folder and add it to the index.html folder.
3- Add the following line to the config.xml (if you are using new version of Phonegap) or plugins.xml (for old version of Phonegap):
4 - add html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/libs/cordova-2.0.0.js"></script>
<script type="text/javascript" src="js/libs/jq_min.js"></script>
<script src="js/libs/share.js">
</script>
<script>
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
}
//share plugin for update status
function share(subject, text) {
window.plugins.share.show({
subject: subject,
text: text},
function() {
alert("sent success");}, // Success function
function() {alert('Share failed')} // Failure function
);
};
//Send message on facebook
$(document).ready(function() {
$("button#sendFacebook").click(function(){
var txtsub = $("input#txtsub").attr("value");
var txtmsg = $("#txtmsg").val();
share(txtsub, txtmsg);
});
});
</script>
</head>
<body>
<input id="txtsub" type="text" placeholder="Enter Subject" maxlength="20" required /><br/><br/>
<textarea placeholder="Enter Message" id="txtmsg" rows="4" cols="25"></textarea><br/>
<button id="sendFacebook">Update Status </button>
</body>
</html>
and test this plugin for Face book,twitter,gmail etc.
& enjoy :).
Let me know if you have any query.
it seems that you are not implementing the plugin in a proper way, just try the following steps:
1- Put the java file in the same folder of the MainActivity.java
2- Put the Js file in the www folder and add it to the index.html
3- Add the following line to the config.xml (if you are using new version of Phonegap) or plugins.xml (for old version of Phonegap):
<plugin name="Share" value="Path_Of_Your_Project.share.Share"/>
4- Just write the following into your JS file:
function share(subject, text) {
window.plugins.share.show({
subject: subject,
text: text},
function() {}, // Success function
function() {alert('Share failed')} // Failure function
);
};
To Call the function:
$("#share_id").onClick(function(){
share("subject", "text");
});
As simple as this.