i'm trying use google drive file picker file uploader site. i've got working, i've been stuck trying image url images uploaded via picker. here's js have now:
/******************** google picker script ********************/ var developerkey = 'aizasycckbk236c5th7pujhlz485r7xi-m64edg', //browser api key clientid = '958305636628-7hvvhnprofn4thnvatdhc7pvucd2efkf.apps.googleusercontent.com', //client id scope = ['https://www.googleapis.com/auth/photos','https://www.googleapis.com/auth/photos.upload','https://www.googleapis.com/auth/drive.readonly'], //permission scope pickerapiloaded = false, oauthtoken; function onapiload() { // use api loader script load google.picker , gapi.auth. gapi.load('auth', {'callback': onauthapiload}); gapi.load('picker', {'callback': onpickerapiload}); } function onauthapiload() { window.gapi.auth.authorize({ 'client_id': clientid, 'scope': scope, 'immediate': false }, handleauthresult); } function onpickerapiload() { pickerapiloaded = true; createpicker(); } function handleauthresult(authresult) { if (authresult && !authresult.error) { oauthtoken = authresult.access_token; createpicker(); } } function createpicker() { // create , render picker object picking user photos. if (pickerapiloaded && oauthtoken) { var picker = new google.picker.pickerbuilder(). addview(google.picker.viewid.photos). addview(google.picker.viewid.photo_upload). addview(google.picker.viewid.image_search). addview(google.picker.viewid.video_search). addview(google.picker.viewid.documents). setoauthtoken(oauthtoken). setdeveloperkey(developerkey). setcallback(pickercallback). build(); picker.setvisible(true); } } function pickercallback(data) { // simple callback implementation. var url = 'nothing'; if (data[google.picker.response.action] == google.picker.action.picked) { var doc = data[google.picker.response.documents][0]; console.log(doc); var thumbs = data.docs[0].thumbnails; var imageurl = thumbs[thumbs.length - 1].url; //select largest image returned } var message = 'you picked: <br/><img src="'+imageurl+'"/>'; document.getelementbyid('result').innerhtml = message; } as can see in pickercallback function, has selected largest image in json data returned. however, image 512px wide, when image uploaded much, larger. photo shows @ full resolution in google photos library, can't find way high res version programmatically. here's json data picker returns after uploading:
object {id: "6228330388484160754", serviceid: "picasa", mimetype: "application/vnd.google-apps.photo", name: "20151128_205613.jpg", description: ""…} description: "" iconurl: "https://ssl.gstatic.com/docs/doclist/images/icon_10_generic_list.png" id: "6228330388484160754" lasteditedutc: 1448762173000 mediakey: "af1qipmhalax4va1mmnof_ynzybpfn0eg75xq12cu16g" mimetype: "application/vnd.google-apps.photo" name: "20151128_205613.jpg" parentid: "6228330389946890849" rotation: 0 serviceid: "picasa" sizebytes: 2449784 thumbnails: array[5] 0: object height: 32 url: "https://lh3.googleusercontent.com/-ngxytft7pv8/vm95ft1efpi/aaaaaaaa3ge/_aufmzavaxw/s32-c/20151128_205613.jpg" width: 32 1: object height: 64 url: "https://lh3.googleusercontent.com/-ngxytft7pv8/vm95ft1efpi/aaaaaaaa3ge/_aufmzavaxw/s64-c/20151128_205613.jpg" width: 64 2: object height: 72 url: "https://lh3.googleusercontent.com/-ngxytft7pv8/vm95ft1efpi/aaaaaaaa3ge/_aufmzavaxw/s72-c/20151128_205613.jpg" width: 72 3: object height: 225 url: "https://lh3.googleusercontent.com/-ngxytft7pv8/vm95ft1efpi/aaaaaaaa3ge/_aufmzavaxw/s400/20151128_205613.jpg" width: 400 4: object height: 288 url: "https://lh3.googleusercontent.com/-ngxytft7pv8/vm95ft1efpi/aaaaaaaa3ge/_aufmzavaxw/20151128_205613.jpg" width: 512 length: 5 type: "photo" url: "https://picasaweb.google.com/101379568166574033142/20151215#6228330388484160754" version: 56833 a couple more things, 'url' part of data links larger, still not full resolution version of picture on picasa web albums. reliable source image url? , if so, how extract url there?
here live demo of have far.
you not image url directly accessible image file, can original image using id returned picker api follows
get https://www.googleapis.com/drive/v3/files/0b9jnhsvvjoivm3dkcgrkrmviovu?alt=media authorization: bearer [your access token] use content of file , display image using mimetype returned
Comments
Post a Comment