I need to integrate One Driver file picker in my website. I am using this js lib to do the task.
<script type="text/javascript" src="//js.live.net/v5.0/wl.js"></script>
The code I wrote is
WL.init({ client_id: "000000004C1xxxxx", redirect_uri: 'https://xxx.net/' });
WL.login({
scope: "wl.skydrive wl.signin"
}).then(
function(response) {
WL.fileDialog({
mode: "open",
select: "multi"
}).then(
function (response) {
},
function (responseFailed) {
}
);
},
function(response) {
log("Failed to authenticate.");
}
);
It showed the popup window, and went through the authentication process. However once I've logged in within the popup window. It just redirected to the redirect URL I provided, the file picker never showed. Any ideas?
I solved this issue by including the js script in my callback page, wl sdk will automatically handle the oauth process for you.
<script type="text/javascript" src="//js.live.net/v5.0/wl.js"></script>
It's weird as I could not find any documents related to how you should do with your callback page on MS developer website.
Can you get the "Using the open from OneDrive picker" sample working on http://isdk.dev.live.com?
Use the function below in your js file and don't forget to include :
<script type="text/javascript" src="https://js.live.net/v7.0/OneDrive.js"></script>
function launchOneDrivePicker() {
var odOptions = {
clientId: "*******************************",
action: "download",
multiSelect: true,
openInNewWindow: true,
advanced: {
queryParameters: "select=id,name,size,file,folder,photo",
redirectUri: (Eneter your default url e.g :)"http://localhost:60666/WebForm1.aspx"
},
success: function (response) { /* success handler */ },
cancel: function () { /* cancel handler */ },
error: function (e) { /* error handler */ },
};
OneDrive.open(odOptions);
}
I hope it works for everyone thanks.
Related
I'm new to the OneDrive API and I cannot figure out why a window doesn't pop open when I call the function? I get no error logs in the console window either.
<script type="text/javascript" src="https://js.live.net/v7.0/OneDrive.js"></script>
<script type="text/javascript">
function launchOneDrivePicker(){
var options = {
clientId: "XXXXXXXXXXXXXXXXXXXXXXXX", (I put my client ID in here.)
action: "query",
multiSelect: true,
openInNewWindow: true,
advanced: {
redirectUri: "XXXXXXXXXXXXXXXXXXXXXXXXXXXX" (I put my redirect URI in here)
},
success: function(files) { /* success handler */ },
cancel: function() { /* cancel handler */ },
error: function(e) { /* error handler */ }
}
OneDrive.open(options);
}
</script>
<button onClick="launchOneDrivePicker">Open from OneDrive</button>
I don't know what I'm doing wrong? any assistance would be great.
try set action to one of [share | download | query], the action is like a enum, so it can only be set to action="query" for example.
I have a page, and I'm referencing a bunch of scripts with regular script tag in the page's header: jQuery, etc, and my compiled script called index.js. Well the latter is big one, around 1.2M (don't ask why).
My index.html seems like this:
<html>
<head>
<title>Cool</title>
<script src='jQuery.js'></script>
<!-- more scripts -->
<script src='index.js'></script>
<!-- more stuff -->
The problem is if I use PhantomJS engine, my script doesn't get executed on any platforms. If I use SlimerJS/XUL then it gets executed on Windows, but doesn't get on OSX. I'm verifying it with a regular waitFor, evaluating a global variable's value, nothing extraordinary:
casper.test.begin('index.js executes', 1, function (test) {
casper.start(host);
casper.waitFor(
function () {
return casper.evaluate(function () {
return !!window.ENV;
});
},
function () {
test.pass('index.js run');
},
function () {
test.fail('index.js did not run');
});
casper.run(function () {
test.done();
});
});
On the other hand jQuery gets initialized in either environments, I can run jQuery code in evaluate context well, so this will pass:
casper.test.begin('jQuery works', 1, function suite(test) {
casper.start(host);
casper.waitFor(
function () {
return casper.evaluate(function () {
try {
return !!$('html').length;
}
catch (e) {
return false;
}
});
},
function () {
test.pass('jQuery works');
},
function () {
test.fail('jQuery did not init');
});
casper.run(function () {
test.done();
});
});
If I log out page events I can see that index.js loads with HTTP result of 200, it just doesn't get executed.
Did someone experienced this before? Does PhantomJS or SlimeJS have some platform specific limitations of script size/complexity?
Is there any working solutions to prevent Facebook Like Box to not breaking his container or something ? Have set the async to TRUE but still gets out. As I can see on stackoverflow there are issues only for fb:login_button, however I receive the same warning to console:
fb:like_box failed to resize in 45s
To sum up, here is my code, perhaps I am missing something.
HTML Tag
<html lang="en" xmlns:fb="http://ogp.me/ns/fb#">
FB Initialization
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: <?php echo $this->config['facebook']['appId']; ?>,
status: true,
cookie: true,
xfbml: true
});
/* All the events registered */
FB.Event.subscribe('auth.login', function (response) {
// do something with response
alert("login success");
});
FB.Event.subscribe('auth.logout', function (response) {
// do something with response
alert("logout success");
});
FB.getLoginStatus(function (response) {
if (response.session) {
// logged in and connected user, someone you know
alert("login success");
}
});
};
(function () {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
</script>
FB Like Box
<div class="facebook-plugin">
<div class="fb-like-box" data-href="https://www.facebook.com/****" data-width="346" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
</div>
This is it. Any help would be appreciated. Thanks in advance!
Accordingly to new Facebook API upgrade, they give up to Like Box, therefore this is no longer an issue.
With the release of Graph API v2.3, the Like Box plugin is deprecated. Please use the new Page Plugin instead. The Page Plugin allows you to embed a simple feed of content from a Page into your websites.
If you do not manually upgrade to the Page Plugin, your Like Box plugin implementation will automatically fall back to the Page Plugin by June 23rd 2015.
Page Plugin link is https://developers.facebook.com/docs/plugins/page-plugin
I've started a new Visual Studio 2012 Express Web project using the HotTowel SPA template. I'm not sure where I should be placing the code to load the Facebook SDK within the HotTowel structure?
I've tried main.js, and shell.js but I can't seem to get the sdk to load. Facebook says to put the below code to load the sdk asynchronously
window.fbAsyncInit = function () {
// init the FB JS SDK
FB.init({
appId: '577148235642429', // App ID from the app dashboard
channelUrl: '//http://localhost:58585/channel.html', // Channel file for x-domain comms
status: true, // Check Facebook Login status
xfbml: true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) { return; }
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all/debug.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Create a module in a file called facebooksdk.js that contains this code. Then "require" the code in the boot sequence, if you want it to load right away.
It is not easy to use to use Facebook SDK with Durandal.
Facebook offers instructions how to set it up with require. But sounds like that method is not supported in Durandal.
I made my dirty version by wrapping global FB object with vm supporting knockout. You could easily use that and bind to any properties like users name.
Include that facebook.js from shell.js to make sure it is loaded when app starts.
Here is my facebook.js:
define(['services/logger'], function (logger) {
var vm = {
facebook: null,
initialized: ko.observable(false),
name: ko.observable(""),
picturesrc: ko.observable(""),
login: login,
logout: logout
};
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_UK/all.js', function () {
window.fbAsyncInit = function () {
vm.facebook = FB;
vm.facebook.init({
appId: '160000000000499',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
vm.initialized(true);
vm.facebook.getLoginStatus(updateLoginStatus);
vm.facebook.Event.subscribe('auth.statusChange', updateLoginStatus);
};
});
return vm;
function login() {
vm.facebook.login( function(response) {
//Handled in auth.statusChange
} , { scope: 'email' });
}
function logout() {
vm.facebook.logout( function (response) {
vm.picturesrc("");
vm.name("");
});
}
function updateLoginStatus(response) {
if (response.authResponse) {
logger.log("Authenticated to Facebook succesfully");
vm.facebook.api('/me', function (response2) {
vm.picturesrc('src="https://graph.facebook.com/' +
+response2.id + '/picture"');
vm.name(response2.name);
});
} else {
logger.log("Not authenticated to Facebook");
vm.picturesrc("");
vm.name("");
}
}
});
I have not tested my code properly. But atleast logging in and fetching name worked fine in Chrome.
Remember change appId and update proper domain at developers.facebook.com.
I'm trying to upload a file using Ext JS forms and in case of success or failure, show appropriate messages. But I'm not able to get the desired result. I'm not able to make success or failure callbacks work in form.submit action.
What I've done till now is:
Creating a form with this script:
new Ext.FormPanel({
fileUpload: true,
frame: true,
url: '/profiler/certificate/update',
success: function() {
console.log(arguments);
},
failure: function() {
console.log(arguments);
}
}).getForm().submit()
/*
The response Content-Type is text/html (with charcode=utf8);
The response JSON is: { "success": true }
*/
Setting the response Content-Type to text/html based on this answer.
Sending an appropriate JSON result back, based on Ext JS docs. The response captured via Fiddler is:
{"success":false}
or
{"success":true}
I even set the response Content-Type to application/json. But still no success.
I've read links like this and this, but none of them helped. Please note that I also tried another script which creates a form, with an upload field in it, and a save button, and I submitted the form in the handler of the save button. But still no callback is fired.
Here's a working example - Javascript code:
Ext.onReady(function () {
Ext.define('ImagePanel', {
extend: 'Ext.form.Panel',
fileUpload: true,
title: 'Upload Panel',
width: 300,
height: 100,
onUpload: function () {
this.getForm().submit({
url: 'upload.php',
scope: this,
success: function (formPanel, action) {
var data = Ext.decode(action.response.responseText);
alert("Success: " + data.msg);
},
failure: function (formPanel, action) {
var data = Ext.decode(action.response.responseText);
alert("Failure: " + data.msg);
}
});
},
initComponent: function () {
var config = {
items: [
{
xtype: 'fileuploadfield',
buttonText: 'Upload',
name: 'uploadedFile',
listeners: {
'change': {
scope: this,
fn: function (field, e) {
this.onUpload();
}
}
}
}
]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
this.callParent(arguments);
}
});
var panel = Ext.create('ImagePanel', {
renderTo: Ext.getBody()
});
});
And PHP code:
<?php
if (isset($_FILES)) {
$temp_file_name = $_FILES['uploadedFile']['tmp_name'];
$original_file_name = $_FILES['uploadedFile']['name'];
echo '{"success": true, "msg": "'.$original_file_name.'"}';
} else {
echo '{"success": false, "msg": "No Files"}';
}
I have been struggling with this for quite some time now as well. Here's my code:
Ext.getCmp('media-upload-form').getForm().doAction('submit', {
url: './services/recordmedia/upload',
method: 'post',
waitMsg: 'Please wait...',
params: {
entityId: this.entityId,
},
failure: function(form, action){
alert(_('Error uploading file'));
this.fireEvent('file-upload');
this.close();
},
success: function(form, action){
this.fireEvent('file-upload');
this.close();
},
scope: this
})
The response was always wrapped in <pre> tags by the browser, what caused the Extj lib not to call the callbacks. To fix this:
make sure your server returns the correct json: {"success":true}
make sure that the content-type is set to text/html
Actually, this is well covered by docs for Ext.form.Panel and Ext.form.Basic. The problem with your code not working is that there are no config options "success", "failure" for the form panel. You should put them in the config object passed to the submit action. So your code should look like:
new Ext.FormPanel({
fileUpload: true,
frame: true
}).getForm().submit({
url: '/profiler/certificate/update',
success: function() {
console.log(arguments);
},
failure: function() {
console.log(arguments);
}
});
Note the difference: In Ext 4, there is a form component (Ext.form.Panel) which is basically a view component concerned with how you form looks, and then there is the underlying form class (e.g. Ext.form.Basic) concerned with the functionality. Form submissions are handled by Ext.form.Basic (or whatever returned by your form.getForm()).