0

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.

SoftwareTester
  • 1,048
  • 1
  • 10
  • 25

1 Answers1

0

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

enter image description 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;
}
Serge insas
  • 45,904
  • 7
  • 105
  • 131
  • Unfortunally 'Hosting' is NOT visible in my details. The only Id I can get is from the SHARING popup – SoftwareTester Jun 22 '14 at 18:56
  • Strange...but you don't need it since I've shown how to build it! – Serge insas Jun 22 '14 at 19:21
  • That said, it is visible only on images...did you try the code? – Serge insas Jun 22 '14 at 19:22
  • I tried your test example and also https://googledrive.com in my code. But no succes. Now I tried your example separately (changing the filename of course), but it doesn't work. I think it has somethng to do with that my files are not publicly available. – SoftwareTester Jun 22 '14 at 20:08
  • It works, thanks! But it is only part of the solution as for other (mentioned) files it doesn't work. I had a look at file.getThumbnail() and getBlob(), but I can't find how to convert those to an image nor how to preview the files as such – SoftwareTester Jun 23 '14 at 10:23
  • I'm afraid it won't be possible for pdf and MS Word, these are files that need special processing to view them while images are just encoded bits. I can't be 100% sure but I would say 99.5 % not possible... In the mean time since your question was entitled "preview an image file" I'd suggest to consider it as answered. – Serge insas Jun 23 '14 at 10:50