i am creating an phonegap application where user will capture some pictures and attach it to predefined mail id. Iam able to capture image but unable to attach all picture in app folder i.e "/mnt/sdcard/Android/data/pacakgename/cache/".
I tried to implement as in this for dynamic attachment.
My codes are below:
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="emailcomposer.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", deviceready, true);
function deviceready() {
console.log("Device ready");
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, onFail);
}
function gotFS(fileSystem) {
var reader = fileSystem.root.createReader();
reader.readEntries(gotList, onFail);
}
function gotList(entries) {
var i;
var fullPath = "/mnt/sdcard/Android/data/packagename/cache/";
for (i=0; i<entries.length; i++) {
if (entries[i].name.indexOf(".jpg") != -1) {
console(entries[i].fullPath);
}
}
}
function composeText(){
var message1 = document.getElementById('message_body').value;
console.log(message1);
window.plugins.emailComposer.showEmailComposer(
"Get an Estimate",
message1,
["sth#mail.com"],
[],
[],
true,
[attachment link]
);
//exit the app after clicking this button
navigator.app.exitApp();
// navigator.camera.cleanup(onSuccess,fail);
// function onSuccess(){
// }
// function fail(){
// }
}
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
<style type="text/css">
li{
list-style: none;
float:left;
padding: 0 5 5 0 ;
}
</style>
</head>
<body>
<h1>Get a Repair Estimate</h1>
<div style="clear:both;"></div>
Provide any details you want us to know(Optional):
<ul>
<li>
<textarea style="width:250px;height:250px;" name="message_body" id = 'message_body' placeholder="Add Notes here(if any)"></textarea>
</li>
<div style="clear:both;"></div>
<li>
<button onclick="composeText();">Get Your Estimate</button>
</li>
</body>
</html>
Any Help.
I got the solution for this. I was unable to understand fileDirectory api of phonegap that caused problem for me.
I solved my problem with following code:
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
fileSystem.root.getDirectory("MyAppFolder", {
create: true
},
function(directory) {
console.log("Final 63" + directory.fullPath);
attachPaths = directory.fullPath;
var attachPath=attachPaths.slice(7,attachPaths.length);
var directoryReader = directory.createReader();
directoryReader.readEntries(function(entries) {
var i;
for (i=0; i<entries.length; i++) {
console.log(entries[i].name);
attachFile[i] =attachPath + "/" + entries[i].name;
}
console.log(attachFile);
},
function (error) {
alert(error.code);
});
});
}, function(error) {
alert("can't even get the file system: " + error.code);
});
Now, we can pass attachFile to emailcomposer plugin:
window.plugins.emailComposer.showEmailComposerWithCallback(null,
"Get an Estimate",
"Here is the mail body"
["to"],
[cc],
[bcc],
true,
attachFile
);
I have solved it Please go through this link regarding my full answer. I posted my answer as i didn't wanted it to unsolved question.
I used this emailcomposer plugin
Hope, it may help someone.
Related
EDIT:
I think i have found a solution for this one. Might be a little primitive but inserting it here until someone comes up with a better solution.
Thanks !
<html>
<body onload="makeShort()">
<p id="button" style=display:none; onclick="makeShort()">Click me.</p>
<span id="output" style=display:none; >Wait. Loading....</span>
</body>
<head>
</head>
<script type="text/javascript">
function makeShort()
{
var longUrl=location.href;;
var request = gapi.client.urlshortener.url.insert({
'resource': {
'longUrl': longUrl
}
});
request.execute(function(response)
{
if(response.id != null)
{
str =""+response.id+"";
document.getElementById("output").innerHTML = str;
}
else
{
alert("error: creating short url n"+ response.error);
}
});
}
window.onload = makeShort;
function load()
{
//Get your own Browser API Key from https://code.google.com/apis/console/
gapi.client.setApiKey('xxxxxx');
gapi.client.load('urlshortener', 'v1',function(){document.getElementById("output").innerHTML="";});
}
window.onload = load;
</script>
<script>
setTimeout(function(){
document.getElementById('button').click();
},1000);
</script>
<script src="https://apis.google.com/js/client.js"> </script>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script>
function SendLinkByMail(href) {
var subject= "Interesting Information";
var body = document.getElementById("output").innerHTML;
body += " Interesting Information";
var uri = "mailto:?subject=";
uri += encodeURIComponent(subject);
uri += "&body=";
uri += encodeURIComponent(body);
window.open(uri);
}
</script>
</head>
<body>
<p>Email link to this page</p>
</body>
</html>
Can some one suggest why this "auto-click" function is not working in my code below?
function makeShort() {
var longUrl = location.href;;
var request = gapi.client.urlshortener.url.insert({
'resource': {
'longUrl': longUrl
}
});
request.execute(function(response) {
if (response.id != null) {
str = "<b>Long URL:</b>" + longUrl + "<br>";
str += "<b>Short URL:</b> <a href='" + response.id + "'>" + response.id + "</a><br>";
document.getElementById("output").innerHTML = str;
} else {
alert("error: creating short url n" + response.error);
}
});} window.onload = function() {
var button = document.getElementById('modal');
button.form.submit();}
function load() {
//Get your own Browser API Key from https://code.google.com/apis/console/
gapi.client.setApiKey('xxxxxxxxx');
gapi.client.load('urlshortener', 'v1', function() {
document.getElementById("output").innerHTML = "";
});} window.onload = load;
<html>
<input type="button" id="modal" value="Create Short" onclick="makeShort();" /> <br/> <br/>
<div id="output">Wait. Loading....</div>
<head>
</head>
<script src="https://apis.google.com/js/client.js"> </script>
</html>
My basic aim is to insert a "share via email" button on the page which would shorten the url on the address bar and open user's email client/whatsapp app to share that url..
Obviously I could not find a way to combine these two functions in to one since I am not a very experienced js person. The primitive solution I found is to auto-click the first function, get the short url, and then find a different code to insert this in to the body of the "mailto" link, which will be my 2nd challenge.
To programmatically click a button on page load
If you are using jQuery:
$(function() {
$('#modal').click();
});
Plain javascript:
window.onload = function(){
var event = document.createEvent('Event');
event.initEvent('input', true, true);
document.getElementById("modal").dispatchEvent(event);
};
I am working on cordova email composer to send emails. But I am getting the error "email plugin not available" when I tried to execute the app.
When I add
< gap:plugin name="de.appplant.cordova.plugin.email-composer" version="0.8.2" />
to the config file I am getting errors. Here is my code.
<!DOCTYPE html>
<html>
<head>
<title>Contact Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
// specify contact search criteria
var options = new ContactFindOptions();
options.filter=""; // empty search string returns all contacts
options.multiple=true; // return multiple results
filter = ["displayName"]; // return contact.displayName field
// find contacts
navigator.contacts.pickContact(function(contact){
console.log("The following contact has been selected:" + JSON.stringify(contact));
},function(err){
console.log("Error: " + err);
});
}
// onSuccess: Get a snapshot of the current contacts
//
function onSuccess(contacts) {
for (var i=0; i<contacts.length; i++) {
alert(contacts[i].displayName);
}
};
// onError: Failed to get the contacts
//
function onError(contactError) {
alert("onError!");
};
document.addEventListener("deviceready", draftEmail, false);
function draftEmail(subject, message) {
if (!cordova.plugin){
//non-mobile - plugins are not present.
alert("Email plugin is not available");
return;
}
if (!isAvailable){
//mobile, but no email installed
alert("Email is not available")
return;
}
cordova.plugins.email.addAlias('gmail', 'com.google.android.gm');
cordova.plugins.email.open({
app: 'gmail',
subject: 'Sent from Gmail',
body: 'How are you?',
isHtml: true
})
}
</script>
</head>
<body>
</body>
</html>
Config file:
<feature name="EmailComposer"> <param name="android-package" value="de.appplant.cordova.plugin.emailComposer.EmailComposer" /> </feature>
<feature><gap:plugin name="de.appplant.cordova.plugin.email-composer" version="0.8.0" /></feature>
</widget>
In draftEmail, you are checking for cordova.plugin but not cordova.plugins, hence you are getting the error alert.
Cross-answering your cross-post :)
Contact Example
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
var myContact = navigator.contacts.create({"displayName": "Test User"});
myContact.note = "This contact has a note.";
console.log("The contact, " + myContact.displayName + ", note: " + myContact.note);
}
</script> </head> <body>
<h1>Example</h1>
<p>Create Contact</p> </body> </html>
I Compiled this code and tried on my android contacts not creating Test user"
Add save() after you create the contact and populate the properties...
function onDeviceReady() {
var myContact = navigator.contacts.create({"displayName": "Test User"});
myContact.note = "This contact has a note.";
myContact.save(function() {
console.log("contact saved");
},
function() {
console.log("could not save contact");
});
console.log("The contact, " + myContact.displayName + ", note: " + myContact.note);
}
The error is that the db could not be opened and $ not defined, failed to load resources(j query).The code aims at receiving the input field values(date,cal) and storing them into the database using indexedDB
<!DOCTYPE html>
<html manifest="manifest.webapp" lang="en">
<head>
<meta charset="utf-8">
<title>Diab</title>
<link rel="stylesheet" href="diab.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0/jquery.min.js"></script>
<script type="text/javascript" src="diab1.js"></script>
</head>
<body>
<input type="date" id="date">Date</input>
<input type="number" id="cal">Cal</input>
<button id="add" >Add</button>
</body>
</html>
(function()
{ var db;
var openDb=function()
{
var request=indexedDB.open("diabetore");
request.onsuccess = function()
{
console.log("DB created succcessfully");
db = request.result;
console.log("openDB done!!");
};
request.onerror=function(){
alert("could not open db");
};
request.onupgradeneeded = function()
{
console.log("openDB.onupgradeneeded function");
var store = db.createObjectStore("diab", {keyPath: "date"});
var dateIndex = store.createIndex("date", "date",{unique: true});
// Populate with initial data.
store.put({date: "june 1 2013",cal:70});
store.put({date: "june 2 2013",cal:71});
store.put({date: "june 3 2013",cal:72});
store.put({date: "june 8 2013",cal:73});
};
};
function getObjectStore(store_name,mode)
{
var tx=db.transaction(store_name,mode);
return tx.objectStore(store_name);
}
function addItems(date,cal)
{
console.log("addition to db started");
var obj={date:date,cal:cal};
var store=getObjectStore("diab",'readwrite');
var req;
try
{
req=store.add(obj);
}catch(e)
{
if(e.name=='DataCloneError')
alert("This engine doesn't know how to clone");
throw(e);
}
req.onsuccess=function(evt)
{
console.log("****Insertion in DB successful!!****");
};
req.onerror=function(evt)
{
console.log("Could not insert into DB");
};
}
function addEventListners()
{
console.log("addEventListeners called...");
$('#add').click(function(evt){
console.log("add...");
var date=$('#date').val();
var cal=$('#cal').val();
if(!date || !cal)
{
alert("required field missing..");
return;
}
addItems(date,cal);
});
}
openDb();
addEventListners();
})();
Regarding the problem of not being able to see the db created, when you open the database you should pass another parameter with the version of the database, like:
var request=indexedDB.open("diabetore",1);
To see the DB structure on the Resources tab of Chrome Developer Tools, sometimes you must refresh the page.
You will also have a problem with your addEventListners() function since your anonymous function is run before the browser reads the HTML content so the browser doesn't not know about the '#add' element, so the click event handler for that element is not created.
You should put your code inside "$(function() {" or "$(document).ready(function() {":
$(function() {
(function() {
var db;
var openDb=function() {
You should test the script URL in your browser. Then you'd realize that the script doesn't exist.
You need to change 2.0 to 2.0.0 for example.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
I'm working on mobile device (iOS). I develop a hybrid application using HTML/CSS/Javascript.
I have this code founded on Apache Cordova API :
<!DOCTYPE html>
<html>
<head>
<title>Capture Audio</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8" src="json2.js"></script>
<script type="text/javascript" charset="utf-8">
// Called when capture operation is finished
//
function captureSuccess(mediaFiles) {
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
uploadFile(mediaFiles[i]);
}
}
// Called if something bad happens.
//
function captureError(error) {
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
}
// A button will call this function
//
function captureAudio() {
// Launch device audio recording application,
// allowing user to capture up to 2 audio clips
navigator.device.capture.captureAudio(captureSuccess, captureError, {limit: 2});
}
// Upload files to server
function uploadFile(mediaFile) {
var ft = new FileTransfer(),
path = mediaFile.fullPath,
name = mediaFile.name;
ft.upload(path,
"http://my.domain.com/upload.php",
function(result) {
console.log('Upload success: ' + result.responseCode);
console.log(result.bytesSent + ' bytes sent');
},
function(error) {
console.log('Error uploading file ' + path + ': ' + error.code);
},
{ fileName: name });
}
</script>
</head>
<body>
<button onclick="captureAudio();">Capture Audio</button> <br>
</body>
</html>
I can capture my voice with it and in theory upload it to
http://my.domain.com/upload.php
But I wonder how to adapt this code to upload file on my Dropbox . Is it possible to upload file to Dropbox as easy as that ?
As #sinaneker mentioned, you can do this server-side with PHP (or other languages).
But you can also do this directly from JavaScript using Dropbox's JavaScript library: https://github.com/dropbox/dropbox-js