CODEWITHSUNDEEP
google-apps-scriptweb-applicationsgoogle-drive-api
cbootle
cbootle

Reputation: 169

How to display a Google Drive image using Google Apps Scripts?

If I use the following, from Google's tutorial pages, to load an image, it works fine:

// The very first Google Doodle! app.add(app.createImage("http://www.google.com/logos/googleburn.jpg"));

but if I try to obtain a URL from own Google Docs, the image fails to load:

var image;
var url;    
var files = DocsList.getAllFiles();        
for (var i = 0; i < files.length; i++) {  
    url = files[i].getUrl();  
    app.add(app.createImage(image));  
    app.add(app.createLabel(url));  
}

The URL returned is not directly to the image but a Google Docs container of some sort:

http://docs.google.com/a/--------.com/open?id=0B5B_X4WaXYC7cExRT3Nvb0hTamc

Upvotes: 3

Views: 15989

Answers (5)

Andrew Joseph Nickerson
Andrew Joseph Nickerson

Reputation: 108

I know there's an accepted answer here but Since the deprecation of UiApp it's not really accurate anymore. The following is script to read a given Google drive directory and pass every publicly available image to the template via an assets object with the modern App Script APIs. 

function getAssets(driveDir) {
    var folders = DriveApp.getFoldersByName(driveDir);
    var folder = (folders.hasNext())? folders.next() : false ;
    var assets = {};
    if(folder){
        var files = folder.getFiles();
        while (files.hasNext()) {
            var file = files.next();
            var fileName = file.getName();
            assets[fileName] = 'https://drive.google.com/uc?export=view&id=' + file.getId();
        }
    }
    return assets;
}

The doGet() function should include the assets

function doGet(e) {
    var form = HtmlService.createTemplateFromFile('form.html');
    form.assets = getAssets('Your-drive-folder-name');

    return form.evaluate();

}

And finally in the HTML template you will have access to your assets via the following code:

 <img src="<?= assets.fileName ?>" />

Again keep in mind that the assets have to be publicly available for image to be allowed on your google site/app script/whatever. You could set that via the getAssets() with the File.setSharing API method but I found that setting the permissions on upload was not much of a hassel.

Upvotes: 6

Douglas Starnes
Douglas Starnes

Reputation: 643

Actually you can do this but I fear it is not very reliable. When you click the download button in the viewing container, that link will work. However, you have to have the image publicly available. Or share it to all users who will be able to view the Sheet or Doc.

Upvotes: -1

mzimmerman
mzimmerman

Reputation: 940

Displaying an image in a UiApp from an authenticated URL is not possible, even from Google services like Sites, Docs, etc. Issue #912 documents this.

Upvotes: 0

Srik
Srik

Reputation: 7965

You can store the image as an attachment to a Google Sites page and then access it using the Sites API of Google Apps Script.

Upvotes: -1

Waqar Ahmad
Waqar Ahmad

Reputation: 3730

yes, you can not use images stored in Google Docs. Imgae URL should be a hotlink(Direct link) to that image.

app.createImage('YOUR_IMAGE_HOT_LINK_URL');

Upvotes: 1

Related Questions