How to Upload & Display Google Drive Pictures on Web App using Google Apps Script | B6

Uploading an image to Google Drive from a web app is the easy half. Getting it to actually display afterwards is where most people lose an evening — and this covers both, with the URL format that still works.

The URL problem

Google changed how Drive serves images, and the links everyone learned first — the uc?id= and thumbnail forms — stopped rendering inside web apps. Photos upload fine and then show as broken icons, with nothing in the console explaining why. This build uses the current format, so an uploaded image displays where you put it.

Uploading properly

Several images go up in one action, and each can be renamed before it uploads — so a file called IMG_20240915_113422.jpg arrives in Drive as the product name, the employee name or the record it belongs to. A progress indicator runs to completion, because an upload with no feedback is an upload people cancel halfway. The files land in a Drive folder you nominate, and their names and URLs are written to your Google Sheet.

Setting it up

Two constants at the top of the script: your Drive folder ID and your Sheet ID. Replace them, save, deploy, authorise — that is the whole configuration.

What it is really for

Very few projects are only an image uploader. This is the piece you drop into a bigger build — product photos in an inventory system, student photographs on an admit card, ID scans on a guest register, evidence on a complaint form. Getting it right once saves it going wrong in every project after.