Looking to create a form for uploading files, photos, and videos to specific folders in Google Drive using Google Apps Script. However, encountering an error "invalid argument listener".
Here is the HTML index:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<title>Upload Files</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5954544f484f495a4b7b0e1509150b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<h1>File Uploader</h1>
<div id="form" style="text-align:center;display:block">
<form>
<input class="form-control" type="file" name="myFile" mulitple>
<br>
<br>
<div>
<h3>Choose Folder to upload</h3>
<h6>Max. 50MB</h6>
<input class="btn btn-outline-secondary" type="button" id="submitBtn1" value="File">
<input class="btn btn-outline-secondary" type="button" id="submitBtn2" value="Foto">
<input class="btn btn-outline-secondary" type="button" id="submitBtn3" value="Video">
</div>
<label id="resp"></label>
</form>
</div>
<script>
document.getElementById('submitBtn1').addEventListener('click',
function(e){
google.script.run.withSuccessHandler(onSuccess).uploadFiles(this.childNode)
})
function onSuccess(data_files){
document.getElementById('resp').innerHTML = "File Uploaded successful";
}
document.getElementById('submitBtn2').addEventListener('click',
function(e){
google.script.run.withSuccessHandler(onSuccess).uploadPhotos(this.childNode)
})
function onSuccess(data_photos){
document.getElementById('resp').innerHTML = "Photo Uploaded successful";
}
document.getElementById('submitBtn3').addEventListener('click',
function(e){
google.script.run.withSuccessHandler(onSuccess).uploadVideos(this.childNode)
})
function onSuccess(data_videos){
document.getElementById('resp').innerHTML = "Video Uploaded successful";
}
</script>
</body>
</html>
And here is the code.gs file:
function doGet() {
var html = HtmlService.createHtmlOutputFromFile('index');
return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function uploadFiles(data_files)
{
var file = data_files.myFile;
var folder = DriveApp.getFolderById('12gKxEtiZhL0hKU6qd-ngVih1DhP_UV8_');
var createFile = folder.createFile(file);
return createFile.getUrl();
}
function uploadPhotos(data_photos)
{
var file = data_photos.myFile;
var folder = DriveApp.getFolderById('1LngD6Ziqqd2i5mt-IGX3NWzVPMIAJEWU');
var createFile = folder.createFile(file);
return createFile.getUrl();
}
function uploadVideos(data_videos)
{
var file = data_videos.myFile;
var folder = DriveApp.getFolderById('1LJgcCAn1_Kb6SVVLfxzKkmiw_hg47zoP');
var createFile = folder.createFile(file);
return createFile.getUrl();
}
If the method If Else is required, kindly advise on how to incorporate it, as I am still learning about coding.