How to preview an image located on a Google Drive using GAS - google-apps-script

Question

I want to show a preview of a file (located on Google Drive) selected from a list or tree.
If I try to display an image file the image doesn't show up (allthough it is the right fileId)
function doGet()
{
var app = UiApp.createApplication().setTitle("Image");
var urlDrive = 'https://drive.google.com/file/d/0BxjtiwHnjnkrUVFKaWVaM3BNZjg';
var urlWeb = 'http://cdn.ndtv.com/tech/images/gadgets/google_webfonts_ap.jpg';
// var url = urlWeb; // works
var url = urlDrive; // Doe NOT work
var image = app.createImage(url).setHeight(200);
var panel = app.createVerticalPanel();
panel.add(image);
app.add(panel)
return app;
}
The example shows that changing the url to a file not present on Google Drive it works.
In general I would like to know if it is possible to preview a file (including msWord, msExcel and pdf) in a panel using GAS. A small example will be appreciated much of course.

Answer 1

The problem is the way you get the url.
The only url that works in this case is the one you can see when you examine the image file with "details" in your drive browser window.
it is actually build differently but contains the ID so it is quite easy to re-build...
Here is how it goes:
function doGet(){
var app = UiApp.createApplication().setTitle("Image");
var imgFile = DriveApp.getFilesByName('Chrysanthemum.jpg').next()
ID = imgFile.getId();
Logger.log(ID);
var imgUrl = 'https://googledrive.com/host/'+ID
var image = app.createImage(imgUrl).setHeight(200);
var panel = app.createVerticalPanel();
panel.add(image);
app.add(panel)
return app;
}
test here
EDIT :
Since the code above seems not to work for files that are not publicly shared (not sure) here is another way to get the result (test app updated) that works with files that are shared to 'anyone with the link can view'.
Note That this is not logical since the app is deployed to run "as me" and is accessible to anyone even anonymous"... so from the G Drive pov I open the file... go figure why it behave like that ;-)
I tested in an anonymous session and it works.
I hope this solution will be suitable for you.
function doGet(){
var app = UiApp.createApplication().setTitle("Image");
var imgFile = DriveApp.getFilesByName('Chrysanthemum.jpg').next()
var ID = imgFile.getId();
Logger.log(ID);
var imgUrl = 'https://drive.google.com/uc?export=view&id='+ID
// var imgUrl = 'https://googledrive.com/host/'+ID; //for public files apparently
var image = app.createImage(imgUrl).setHeight(200);
var panel = app.createVerticalPanel();
panel.add(image);
app.add(panel)
return app;
}