Adding an image to a Google site from Docs using Apps Script

Question

I have a script that allows a user to upload an image to Google Docs, this part works but I need a way to retrieve the image itself so that it can be displayed on a Google Site. I tried using doc.getUrl() but that only returns the link for downloading the image. Does anyone know how to achieve this or of another way to handle the image upload which would work better?

This is my code:

    function doGet(e) {
       var app = UiApp.createApplication().setTitle("Upload");
       var formContent = app.createVerticalPanel();
       formContent.add(app.createFileUpload().setName('thefile'));
       formContent.add(app.createSubmitButton('Submit'));
       var form = app.createFormPanel();
       form.add(formContent);
       app.add(form);
       return app;
    }

    function doPost(e) {
       var fileBlob = e.parameter.thefile;
       var doc = DocsList.createFile(fileBlob);
       var url = doc.getUrl();
       Logger.log(url);
    }

Thanks in advance for your help.

Answer 1

When you upload a file to Google Drive, you don't get a direct link to the file (or image in your case) and therefore you cannot embed it anywhere.

The solution is to save the image as an attachment to a Google Sites page and then use that image in your Google Sites page.

While doing this, also be aware of Issue 912 because of which you need to have your images available in a public site

Answer 2

If you can get the Doc ID, then you can create a direct download link like this:

https://docs.google.com/uc?export=download&id=doc_id_here

and therefore an image embed tag:

<img src="https://docs.google.com/uc?export=download&id=doc_id_here" />

Not sure about the download performance, but that should work.