Titanium: Facebook API: Photo not showing - facebook

Starting to pull by hair here, running out of things to try.
I'm taking a photo, and it's not showing. If i use a URL, then it works.
I'm using the API example, so not sure what i'm doing wrong?
The only thing i see on the Facebook page is the message, not the photo.
photoButton.addEventListener('click',function(e){
var image = e.media;
var f = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,'camera_photo.png');
f.write(image);
var blob = f.read();
Titanium.Media.showCamera({
success:function(event) {
Ti.API.debug('Our type was: '+event.mediaType);
if(event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) {
// send XHR req to post image on Facebook
fb.permissions = ['publish_actions', 'status_update', 'publish_stream', 'read_stream','manage_pages']; // Permissions your app needs
fb.authorize();
var data = {
name : "This is my name",
message : 'This is my message',
caption : "This is the caption",
picture : blob
};
fb.requestWithGraphPath('1234567890/feed', data, 'POST', function(e) {
if (e.success) {
alert(e.result);
} else if (e.error) {
alert(e.error);
} else {
alert('Unknown response');
}
});
} else {
alert("got the wrong type back ="+event.mediaType);
}
},
cancel:function() {
// called when user cancels taking a picture
},
error:function(error) {
// called when there's an error
var a = Titanium.UI.createAlertDialog({title:'Camera'});
if (error.code == Titanium.Media.NO_CAMERA) {
a.setMessage('Овој уред нема камера');
} else {
a.setMessage('Unexpected error: ' + error.code);
}
a.show();
},
saveToPhotoGallery:true,
// allowEditing and mediaTypes are iOS-only settings
allowEditing:true,
mediaTypes:[Ti.Media.MEDIA_TYPE_VIDEO,Ti.Media.MEDIA_TYPE_PHOTO]
});

Ok, this post hold the key: Appcelerator Titanium: Facebook Image Upload fail
The issue is for some reason feeds dont work with the FB module, so you have to use an XHR request:
var endPoint = 'https://graph.facebook.com/v2.1/' + pid + '/photos?access_token='+ acc;
xhr.open('POST',endPoint);
xhr.send({
message: data,
picture: image
});

Related

hide ul when user clicks anywhere site

my code is :
function autocomplet() {
var min_length = 0; // min caracters to display the autocomplete
var keyword = $('#country_id').val();
if (keyword.length >= min_length) {
$.ajax({
url: 'ajaxname.php',
type: 'POST',
data: {keyword:keyword},
success:function(data){
$('#country_list_id').show();
$('#country_list_id').html(data);
}
});
} else {
$('#country_list_id').hide();
}
}
function set_item(item) {
// change input value
$('#country_id').val(item);
// hide proposition list
$('#country_list_id').hide();
}
and i wana hide ul (country_list_id) when user click on anywhere ?
and im not good in ajax :(
so any one can edit this code
Assuming you just want to hide the id when the user click basically anything.
Then here.
$(document).on("click", () => {
$('#country_list_id').hide();
})

ngCordova filetransfer not getting path for picture from camera

I have a mobile app that I've created where I want users to be able to take a picture and save it to a server.
I've followed the tutorials, but for some reason the file transfer is not working.
Here is my code:
$cordovaCamera.getPicture(options).then(function( imageData ) {
// self.imgURI = "data:image/jpeg;base64," + imageData;
var server = API_ENDPOINT + '/fileuploads'
var filePath = "data:image/jpeg; base64," + imageData;
document.addEventListener('deviceready', function() {
$cordovaFileTransfer.upload(server, filePath)
.then(function(result) {
// Success!
}, function(err) {
// Error
}, function(progress) {
// constant progress updates
});
}, false);
}
The Cordova plugin for the camera works great, just an issue with saving the file.
If you are specifically looking to get File Url of the image returned from the Camera plugin, following should be the options for the camera plugin:
var options = {
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
};
If you are facing any other specific issue, please mention.
Hope this helps.

Store image to Firebase storage from cordova camera plugins on Ionic

I've red some topics on the subject (e.g: Uploading image to Firebase Storage from Cordova app) but didn't find my answer...
I'm working on a IONIC project with the implementation of the ngCordova camera plugin to take picture and get pic from the librairy.
So I got the result as a image URI and I want to upload it in Firebase storage (as file or Blob).
Here is my code :
$scope.fromCamera = function() {
$ionicPlatform.ready(function() {
var options = {
quality: 75,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 300,
targetHeight: 300,
saveToPhotoAlbum: true e
};
$cordovaCamera.getPicture(options).then(function(imageURI) {
window.resolveLocalFileSystemURL(imageURI, function (fileEntry) {
fileEntry.file(function (file) {
var reader = new FileReader();
reader.onloadend = function () {
// This blob object can be saved to firebase
var blob = new Blob([new Uint8Array(this.result)], { type: "image/jpeg" });
// Create the storage ref
var ref = storageRef.child('images/test');
// Upload the file
uploadPhoto(blob, ref);
};
reader.readAsArrayBuffer(file);
});
}, function (error) {
console.log(error)
});
});
});
};
I read the file and convert it into a Blob before uploading it into firebase. And I got an 'Encoding error' telling me "A URI supplied to the API was malformed, or the resulting Data URL has exceeded the URL length limitations for Data URLs."
I'm running it an chrome browser with the Cordova Mocks extension.
Any help is welcome!
Thanks
uploadPhoto() is my function to upload the file on firebase storage (and save the URL in firebase database)
var storageRef = Firebase.storageRef();
var databaseRef = Firebase.databaseRef();
var uploadPhoto = function(file, ref) {
var task = ref.put(file);
// Update progress bar
task.on('state_changed', function(snapshot){
// nothing
}, function(error) {
// Handle unsuccessful uploads
}, function() {
// Handle successful uploads on complete
$scope.downloadURL = task.snapshot.downloadURL;
$scope.actualKey = databaseRef.child('posts').push().key;
databaseRef.child('posts/' + $scope.actualKey).update({
url : $scope.downloadURL,
id : $scope.actualKey,
time : firebase.database.ServerValue.TIMESTAMP,
});
}
);
}
try changing...
[new Uint8Array(this.result)]
to just this
[this.result]
alternate approach using $cordovaFile
var fileName = imageURI.replace(/^.*[\\\/]/, '');
$cordovaFile.readAsArrayBuffer(cordova.file.tempDirectory, fileName)
.then(function (success) {
// success - get blob data
var imageBlob = new Blob([success], { type: "image/jpeg" });
// Create the storage ref
var ref = storageRef.child('images/test');
// Upload the file
uploadPhoto(imageBlob, ref);
}, function (error) {
// error
});
Instead of getting the path from the URI, in the code, I assume the following...
// modify the image path when on Android
if ($ionicPlatform.is("android")) {
path = cordova.file.cacheDirectory
} else {
path = cordova.file.tempDirectory
}
feel free to parse the path to get the directory

Delete form data for subsequent ajax calls

I have a link that opens a dialog modal asking for a date. When they click submit, javascript takes the form data, generates an ajax call, and returns the response. This works no problem. However if I immediately click the same link again and submit a new date in the form, I get the results from my first ajax POST.
Essentially, subsequent ajax calls are using the original POST data and nothing new. Code has alerts for troubleshooting. Im assuming im setting some var thats not getting reset, but thought this event handler was canceled with the "off", then re-added immediately after and the vars would be in scope to that function alone.
<script>
//Modal submit
$(document).off('click', '#SubmitAllChecks');
$(document).on('click', '#SubmitAllChecks', function(e) {
e.preventDefault();
var form = $('#AllChecks');
var url = form.attr('action');
var method = form.attr('method');
var data = form.serializeArray();
$.each(data, function(k,v) {
alert(v.name + ' : ' + v.value);
});
$.ajax({
url: url,
type: method,
data: data,
dataType: 'json',
beforeSend: function() {
//add load indicator
window.erpui.startload();
},
success: function(data) {
alert('xhr complete');
$.each(data, function() {
alert(this.value + ' data');
if (this.value == 'error' && this.msg != '') {
window.erpui.endload();
window.erpui.notify.error(this.msg);
window.erpui.notify.commit();
}
else if (this.value == 'success') {
window.erpui.endload();
window.erpui.notify.success(this.msg);
window.erpui.notify.commit();
$('.ui-dialog').remove();
//window.location.href="{% url all_checks %}";
//window.location.reload();
}
});
},
error: function() {
alert('error');
//remove load indicator
window.erpui.endload();
}
});
});
</script>

appcelerator titanium mobile Facebook login - alway have not set Titanium.Facebook.loggedIn after login

My mobile app will first require user to login facebook and then go back to the app for further action.
After login fb successfully, it is expected that the Titanium.Facebook.loggedIn will be true and the app can get the value in Ti.Facebook.uid.
However, it is not always the case. Sometimes, after login fb successfully and go back to the app, the Titanium.Facebook.loggedIn is still false and sure cannot get the Ti.Facebook.uid.
But when the user logout and login again within the same app section, it will work fine. Therefore, my app sometimes requires users to login facebook twice.
Do u have any idea of it? The code is listed below.
var login = Titanium.Facebook.createLoginButton({
top: 100, style:'wide'
});
var actionsView = Ti.UI.createView({
top: 0, left: 0, right: 0, touchEnabled: false, height: 320
});
var loginView = Ti.UI.createView({
top: 0, left: 0, right: 0, visible: !Titanium.Facebook.loggedIn, height: Titanium.Platform.displayCaps.platformHeight,opacity:0.85, backgroundColor:'#fff'
});
loginView.add(login);
Titanium.Facebook.addEventListener('login', function(e) {
if (e.success) {
if (Titanium.Facebook.loggedIn){
loginView.hide();
actionsView.touchEnabled=true;
}else{
statusAlert = Titanium.UI.createAlertDialog({title:appname,message:'Login failed.'});
statusAlert.show();
}
if (e.error) {
alert(e.error);
}
});
var logout = Titanium.Facebook.createLoginButton({
top: 300, style:'wide', visible: false
});
You could use Titanium.Facebook.uid instead, that would be something like:
if (Titanium.Facebook.uid){
But probably the problem you are having is due an old Titanium version.
After successful login via facebook save user id into a global variable or in app properties.
I will prefer app properties because unless the user will logout from facebook the uid will remain in the app properties
i-e
Ti.App.Properties.setString('uid', Ti.Facebook.uid);
so when you use your app back just check the uid first.
var fb_id = Ti.App.Properties.getString('uid');
if(fb_id){
// your code
}
and when you logout clear the variable with '' or null.
May be a bit late for an additional answer, but I had a similar problem on iOS. Logging in via FB worked great but after closing the app completely the Facebook module returned 'undefined' when asked for the UID. I solved it by calling the undocumented 'initialize' method.
Follow the setup guide here: https://docs.appcelerator.com/platform/latest/#!/api/Modules.Facebook
And then try this example
var fb = require('facebook');
fb.addEventListener('login', function(e) {
if (e.success) {
alert('login from uid: ' + e.uid + ', name: ' + JSON.parse(e.data).name);
showFriends();
} else if (e.cancelled) {
// user cancelled
alert('cancelled');
} else {
alert(e.error);
}
});
fb.initialize();
function authorize(e) {
fb.authorize();
}
function showFriends() {
alert("fb:\n" + fb.uid + "\n" + fb.accessToken + "\n" + fb.expirationDate);
fb.requestWithGraphPath('me/friends', {
limit : 1000,
}, 'GET', function(e) {
if (e.success) {
// Note: only friends who installed this app are returned
var result = JSON.parse(e.result);
alert("successfully loaded friends");
// each data (user) has id + name fields
} else if (e.error) {
alert('fb friends: ' + e.error);
} else {
alert('Unknown response');
}
});
}
if (fb.loggedIn) {
$.button.hide();
alert("already logged in");
} else {
$.button.show();
}
$.index.open();
Of course you would need something like
<Button id="button" onClick="authorize" >log in</Button>
in your view.