This explanation shows:
- Automatic creation of Custom Menu Item
- Code to open Dialog box
- HTML and
<script>
tag in the HTML for the dialog box
- Code to put the result into the spreadsheet
Code.gs - onOpen() - Create Custom Menu
function onOpen() {
SpreadsheetApp.getUi()
.createMenu('Custom Menu')
.addItem('Show Upload Dialog', 'showUploadBox')
.addToUi();
};
gs Code - Open Dialog
function showUploadBox() {
var htmlOutput = HtmlService.createHtmlOutputFromFile('Dialog')
.setWidth(500)
.setHeight(500);
SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Title of Dialog');
};
Dialog Upload.html
Create a new file with this HTML
<div id="formDiv">
<form id="myForm">
<input id="fileName" name="picToLoad" type="file" />
<br>
<br/>
<input type="button" value="Submit" onclick="fncGetFileName()" />
<br>
<br>
<br>
<input id="idBtnClose" type="button" value="Close" style="display: none" onclick="google.script.host.close()" />
</form>
</div>
<br>
<br>
<div id="status" style="display: none">
<!-- div will be filled with innerHTML after form submission. -->
Working. Please wait...
</div>
<script>
function fncGetFileName(frmData) {
console.log('fncGetFileName ran!');
var theFileName = document.getElementById('fileName').value;
theFileName = theFileName.slice(12);
console.log('theFileName: ' + theFileName);
document.getElementById('status').style.display = 'inline'; //Display msg
google.script.run
.withSuccessHandler(updateOutput)
.processForm(theFileName)
};
// Javascript function called by "submit" button handler,
// to show results.
function updateOutput() {
var outputDiv = document.getElementById('status');
outputDiv.innerHTML = "The File Name was Written!";
document.getElementById('idBtnClose').style.display = 'inline'; //Display msg
}
</script>
gs Code to Save File Name to Sheet
function processForm(argFileName) {
Logger.log('argFileName: ' + argFileName);
var ss = SpreadsheetApp.getActiveSpreadsheet();
var theSheet = ss.getActiveSheet();
var theRange = theSheet.getRange("B4");
theRange.setValue(argFileName);
};