leoherzog · February 9, 2025 11:45
diff --git a/code.gs b/code.gs
 /**
 * This script creates a simple web app where the visitor can select a Google Drive folder with the Google Picker and it will tell you the ID of the folder, since that's now hard to find in the Google Drive web app or Folder URL.
 * To get started:
 * 1. Go to script.google.com and log in as the user that you want to host this published web app.
 * 2. Click "New Project".
 * 3. Rename the project at the top from "Untitled project" to something else (ex. "Folder ID Finder")
 * 4. Copy/paste this code over the default "myFunction" starter code that's currently there
 * 5. Click the ➕ next to "Files" in the sidebar, add an "HTML" file, name it "index" (.html is added by Apps Script), and paste the `index.html` code below over the starter code in that file.
 * 6. Click "Deploy ▼" → "New Deployment". In the "Select Type" ⚙️ gear, choose "Web App". Change "Execute as" to "User accessing the web app" and "Who has access" to "Anyone with a Google Account". Click "Deploy". 
 * You're done! The long "Web app" URL contains the Folder ID Finder. Click it, bookmark it, bop it, etc.
 */

 function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index.html')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0')
    .setTitle('Google Drive Folder ID Finder')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
 }

 function getOAuthToken() {
  Session.getEffectiveUser().getEmail(); // force oAuth token to generate
  DriveApp.getFolders(); // and force scopes
  return ScriptApp.getOAuthToken();
 }
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  </head>
  <body>

    <div class="sidebar">
      <h1>Google Drive Folder ID Finder</h1>
      <div class="block">
        <button id="picker" class="action" onclick="selectFolder()">Choose Google Drive Folder</button>
      </div>
      <div id="results" class="block" style="display:none">
        <div class="inline form-group">
          <p>Folder: "<span id="name"></span>"</p>
          <label for="id">Folder ID:</label>
          <input id="id" style="width:100%" readonly>
          <button id="copy" onClick="document.getElementById('id').select(); document.execCommand('copy');">📋 Copy to Clipboard</button>
          </div>
        </div>
      </div>
    </div>

    <script>

    var pickerApiLoaded = false;

    function loadPickerAPI() {
      gapi.load('picker', {
        "callback": function() {
          pickerApiLoaded = true;
        }
      });
    }

    function onPickerApiLoad() {
      google.script.run.withSuccessHandler(createPicker).getOAuthToken();
    }

    function createPicker(token) {
      if (pickerApiLoaded && token) {
        let myFolders = new google.picker.DocsView()
          // .setOwnedByMe(true)
          .setMode(google.picker.DocsViewMode.LIST)
          .setMimeTypes('application/vnd.google-apps.folder')
          .setSelectFolderEnabled(true);
        let sharedDriveFolders = new google.picker.DocsView()
          .setEnableDrives(true)
          .setMode(google.picker.DocsViewMode.LIST)
          .setMimeTypes('application/vnd.google-apps.folder')
          .setSelectFolderEnabled(true);
        let picker = new google.picker.PickerBuilder()
          .addView(myFolders)
          .addView(sharedDriveFolders)
          .hideTitleBar()
          .setSize(700, 500)
          .setOAuthToken(token)
          .setCallback(updateId) 
          .setOrigin('https://script.google.com')
          .build();
        picker.setVisible(true);
      } else {
        alert('Unable to load the file picker.');
      }
    }

    function selectFolder() {
      google.script.run.withSuccessHandler(createPicker).getOAuthToken();
    }

    function updateId(data) {
      console.log(data);
      if (data.action == google.picker.Action.PICKED) {
      document.getElementById('results').style.display = 'block';
        document.getElementById('name').innerText = data.docs[0].name;
        document.getElementById('id').value = data.docs[0].id;
      }
    }
    
    </script>
    
    <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=loadPickerAPI"></script>

  </body>
 </html>
	/**
	* This script creates a simple web app where the visitor can select a Google Drive folder with the Google Picker and it will tell you the ID of the folder, since that's now hard to find in the Google Drive web app or Folder URL.
	* To get started:
	* 1. Go to script.google.com and log in as the user that you want to host this published web app.
	* 2. Click "New Project".
	* 3. Rename the project at the top from "Untitled project" to something else (ex. "Folder ID Finder")
	* 4. Copy/paste this code over the default "myFunction" starter code that's currently there
	* 5. Click the ➕ next to "Files" in the sidebar, add an "HTML" file, name it "index" (.html is added by Apps Script), and paste the `index.html` code below over the starter code in that file.
	* 6. Click "Deploy ▼" → "New Deployment". In the "Select Type" ⚙️ gear, choose "Web App". Change "Execute as" to "User accessing the web app" and "Who has access" to "Anyone with a Google Account". Click "Deploy".
	* You're done! The long "Web app" URL contains the Folder ID Finder. Click it, bookmark it, bop it, etc.
	*/

	function doGet(e) {
	return HtmlService.createHtmlOutputFromFile('index.html')
	.addMetaTag('viewport', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0')
	.setTitle('Google Drive Folder ID Finder')
	.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
	}

	function getOAuthToken() {
	Session.getEffectiveUser().getEmail(); // force oAuth token to generate
	DriveApp.getFolders(); // and force scopes
	return ScriptApp.getOAuthToken();
	}
	<!DOCTYPE html>
	<html>
	<head>
	<base target="_top">
	<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
	</head>
	<body>

	<div class="sidebar">
	<h1>Google Drive Folder ID Finder</h1>
	<div class="block">
	<button id="picker" class="action" onclick="selectFolder()">Choose Google Drive Folder</button>
	</div>
	<div id="results" class="block" style="display:none">
	<div class="inline form-group">
	<p>Folder: "<span id="name"></span>"</p>
	<label for="id">Folder ID:</label>
	<input id="id" style="width:100%" readonly>
	<button id="copy" onClick="document.getElementById('id').select(); document.execCommand('copy');">📋 Copy to Clipboard</button>
	</div>
	</div>
	</div>
	</div>

	<script>

	var pickerApiLoaded = false;

	function loadPickerAPI() {
	gapi.load('picker', {
	"callback": function() {
	pickerApiLoaded = true;
	}
	});
	}

	function onPickerApiLoad() {
	google.script.run.withSuccessHandler(createPicker).getOAuthToken();
	}

	function createPicker(token) {
	if (pickerApiLoaded && token) {
	let myFolders = new google.picker.DocsView()
	// .setOwnedByMe(true)
	.setMode(google.picker.DocsViewMode.LIST)
	.setMimeTypes('application/vnd.google-apps.folder')
	.setSelectFolderEnabled(true);
	let sharedDriveFolders = new google.picker.DocsView()
	.setEnableDrives(true)
	.setMode(google.picker.DocsViewMode.LIST)
	.setMimeTypes('application/vnd.google-apps.folder')
	.setSelectFolderEnabled(true);
	let picker = new google.picker.PickerBuilder()
	.addView(myFolders)
	.addView(sharedDriveFolders)
	.hideTitleBar()
	.setSize(700, 500)
	.setOAuthToken(token)
	.setCallback(updateId)
	.setOrigin('https://script.google.com')
	.build();
	picker.setVisible(true);
	} else {
	alert('Unable to load the file picker.');
	}
	}

	function selectFolder() {
	google.script.run.withSuccessHandler(createPicker).getOAuthToken();
	}

	function updateId(data) {
	console.log(data);
	if (data.action == google.picker.Action.PICKED) {
	document.getElementById('results').style.display = 'block';
	document.getElementById('name').innerText = data.docs[0].name;
	document.getElementById('id').value = data.docs[0].id;
	}
	}

	</script>

	<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=loadPickerAPI"></script>

	</body>
	</html>