When using DrivePicker get the webcontent link

On a form I put a DrivePicker widget/button. This button opens my Google Drive and I can select an image. To show this image in an Image widget I need the webcontent link instead of the file URL link. The file URL link won't work.

By the property editor of the DrivePicker widget I put the following code at onDocumentSelect part.

varId = result.docs[0].id;
widget.datasource.item.strArtikelAfbeeldingId = result.docs[0].id;
widget.datasource.item.strArtikelAfbeeldingUrl = Drive.Files.get(varId).webContentLink;

Unfortunately I get no webcontentlink and got the following error message

Drive is not defined at pageTabelArtikelen.Form1.Form1Body.DrivePicker1.onDocumentSelect:3:50

How can I get a webcontentlink of a selected image when using DrivePicker widget?

Solution

You need to run a server function from the client to use Drive. So you can still run this function for the onDocumentSelect event, but you would want to declare a server function such as getFileWebContent() and then change your event code to:

Client

var Id = widget.selectedDocId;
    google.script.run
      .withSuccessHandler(function() {
      //do something here with the returned link from server;
      })
      .withFailureHandler(function() {
      //optional failure handler;
      })
      .getFileWebContent(Id);

Server

function getFileWebContent(Id) {
  var link = Drive.Files.get(Id).WebContentLink;
  return link;
}

It would be more ideal to run the server code in the model onCreate event which is a server function. In this case your model can have a field for the file id and in your onCreate event you would run

var link = Drive.Files.get(record.FileId).webContentLink;
record.WebLink = link;