Skip to content

Instantly share code, notes, and snippets.

@Max-Makhrov
Created May 19, 2021
Embed
What would you like to do?
Google Script. HTML-form to select image from computer and save it to Google Drive and to Sheet cell as image.
// sample file:
// https://docs.google.com/spreadsheets/d/1_rk4xFsMrxiuXqo5-HQWfvOjBU6nGDw1rlJFU0sci9U/copy
function onOpen() {
var ui = SpreadsheetApp.getUi();
// Or DocumentApp or FormApp.
ui.createMenu('🙂 Click me')
.addItem('Image 🖼️ to Drive', 'showFormImages')
.addToUi();
}
// Classic Sample:
// https://developers.google.com/apps-script/guides/html/communication#forms
function processForm(base64blob, name) {
try {
var re = new RegExp('^data:(image/.{3,4});base64,(.*)$');
var match = base64blob.match(re);
var test = Utilities.base64Decode(match[2]);
var contentType = match[1];
var blob = Utilities.newBlob(test, contentType, name);
var driveFile = DriveApp.createFile(blob);
// --------------------------------------->>>>>>>
// change to
// DriveApp.getFolderById(<your_folder_id>).createFile(formBlob);
console.log(driveFile.getUrl());
// put image in a cell
var r = SpreadsheetApp.getActiveRange().offset(0,0,1,1);
// ---------------------------------------------------->>>>>>>
// change to
// your cell
var id = driveFile.getId();
driveFile.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW);
r.setFormula('=IMAGE("https://docs.google.com/uc?export=view&id=' + id + '")');
return driveFile.getUrl();
} catch (err) {
Browser.msgBox(err);
}
}
function showFormImages()
{
var html = HtmlService.createHtmlOutputFromFile('Image2Drive');
SpreadsheetApp.getUi().showModalDialog(html, 'Select Image 👀');
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function previewFile(input) {
const preview = document.querySelector('img');
const file = input.files[0];
const reader = new FileReader();
reader.addEventListener("load", function () {
// convert image file to base64 string
preview.src = reader.result;
preview.style.visibility = "visible";
google.script.run.withSuccessHandler(exitForm).processForm(reader.result, file.name);
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
function exitForm() {
google.script.host.close();
}
</script>
</head>
<body>
<input type="file" onchange="previewFile(this)" accept="image/*"><br>
<img src="" height="200" alt="Image preview..." style="visibility: hidden;">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment