Copy to clipboard button for Google Drive files
A better file viewer than the one Google provides, that's more suitable for displaying code and text files, with a Copy to clipboard button as well — great when using mobile devices that only offer Select All functionality for editable text.
If you want to make changes to the script, you need to update the deployment the following way for it to have any effect on the apps script URL:
- Go to Apps Script in your Google account
- Click New project in the upper left corner
- In the code editor, replace everything with the following:
- Replace
FILE_ID
with the file ID in your Google Drive sharing link, and replaceYOUR_TITLE
andYOUR_FAVICON_URL
with your own values (the last two aren't required so they may also be deleted), if necessary, also change the type insetContentType("text/plain")
- In the upper right corner, above the code editor, click Deploy and then New Deployment
- In the dialog that opens, click the cogwheel, and in the drop-down menu, select Web app
- Under Configuration, click Who has access, and in the drop-down menu, select Anyone
- Click Deploy
- After it finishes, click Authorize access
- In window that opens, click your account name
- Click Advanced when a message appears saying Google hasn’t verified this app
- Next, click Go to <project name> (unsafe)
- At the bottom of the page that opens, click Allow
- After it finishes, click the Copy button below the Web app URL
function doGet(e) {
const id = "FILE_ID";
const file = DriveApp.getFileById(id);
const contents = file.getBlob().setContentType("text/plain").getDataAsString();
const html = `<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
:root {
color-scheme: light dark;
}
pre {
overflow-wrap: break-word;
white-space: pre-wrap;
}
</style>
</head>
<body>
<button id="copy">Copy to clipboard</button>
<a href="https://drive.google.com/uc?id=${id}" target="_blank" rel="noreferrer"><button>Download</button></a>
<pre><code>`+ contents + `</code></pre>
<script>
const writeClipboard = async function() {
if (!navigator.clipboard) {
return;
}
try {
const code = document.getElementsByTagName('code')[0];
code.focus();
await navigator.clipboard.writeText(code.innerText);
} catch (err) {
alert('Failed to copy to clipboard!');
}
}
document.getElementById('copy').onclick = function() {
writeClipboard();
}
</script>
</body>
</html>`
const output = HtmlService.createHtmlOutput(html);
output.setTitle('YOUR_TITLE');
output.setFaviconUrl('YOUR_FAVICON_URL');
output.addMetaTag('viewport', 'width=device-width, initial-scale=1');
return output;
}
scripts.google.com
URL that you can use wherever you would have used the regular Google Drive sharing link.
If you want to make changes to the script, you need to update the deployment the following way for it to have any effect on the apps script URL:
- In the script editor, click Deploy, but don't click New Deployment afterwards — that creates a new URL — instead, click Manage deployments so you can keep using the same URL
- In the dialog that opens, click the pencil icon
- Next, click Version, and in the drop-down menu, select New version and afterwards click Deploy