Calling Image File On Google App Scripts To Upload Into Googledrive
I am trying to set up a way to upload image files into a google drive. It will create a folder using a timeid and place the image inside the folder it created. I am having trouble
Solution 1:
The error you're getting is because you're trying to use a imgInp variable which you don't have it defined in any part of the code. You can get the blob file from the input, convert it to a binary array string, pass it to the server-side and finally use it to create your blob and the given Drive file, for this I used the code from this answer.
Using the examples for how to work with forms and success and failure handlers from the HTML Service guide, I put together the below code which worked successfully uploading the given image:
Index.html
<!DOCTYPE html><html><head><basetarget="_top"></head><body><form><divclass="file-field input-field"><divclass="waves-effect waves-light btn"id="wholebtn"><iclass="material-icons right">cloud</i>Browse
<inputtype="file"name="imgInp"id="imgInp"></div><divclass="file-path-wrapper"><inputtype="text"class="file-path"></div></div><buttonclass="btn waves-effect waves-light"name="action"id="button">Submit
<iclass="material-icons right">send</i></button></form><script>// Prevent forms from submitting.functionpreventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
// Add event listeners window.addEventListener('load', preventFormSubmit);
document.getElementById("button").addEventListener("click", upload);
// Handler functionfunctionlogger(e) {
console.log(e)
}
asyncfunctionupload() {
// Get all the file datalet file = document.querySelector('input[type=file]').files[0];
// Get binary content, we have to wait because it returns a promise let fileBuffer = await file.arrayBuffer();
// Get the file content as binary and then convert it to string const data = (newUint8Array(fileBuffer)).toString();
// Pass the binary array string to uploadG funciton on code.gs
google.script.run.withFailureHandler(logger).withSuccessHandler(logger).uploadG(data);
}
</script></body></html>Code.gs
functiondoGet() {
returnHtmlService.createHtmlOutputFromFile('Index');
}
functionuploadG(imgInp){
var parentFolder=DriveApp.getFolderById("[FOLER-ID]");
var newFolder = parentFolder.createFolder('test webApp');
var folderidlookup = newFolder.getId();
var destination = DriveApp.getFolderById(folderidlookup);
var contentType = 'image/jpeg';
// Convert the binary array string to array and use it to create the Blobvar blob = Utilities.newBlob(JSON.parse("[" + imgInp + "]"), contentType);
blob = blob.getAs(contentType);
destination.createFile(blob)
return'Filed uploaded!';
}
Solution 2:
File Upload Dialog
Run upLoadMyDialog() from script editor to get it started. The select file and click upload.
functionfileUpload(obj) {
var d=newDate();
var ts=Utilities.formatDate(d, Session.getScriptTimeZone(), "yyyy-MM-dd-HH-mm");
var folder=DriveApp.getFolderById("****** Enter FolderId *******");
var file=folder.createFile(obj.file1).setName(ts);
}
functionuploadMyDialog() {
var ss=SpreadsheetApp.getActive();
var html='<form><input type="file" name="file1"/><br /><input type="button" value="Upload" onClick="google.script.run.fileUpload(this.parentNode);" /></form>';
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(html),"Upload File");
}
With eventListener:
function uploadMyDialog() {
var ss=SpreadsheetApp.getActive();
var html='<formid="f1"><inputtype="file"name="file1"/><br /><inputtype="button"value="Upload"id="btn1" /></form>';
html+='<script>window.onload=function(){document.getElementById("btn1").addEventListener("click",function(){google.script.run.fileUpload(document.getElementById("f1"))})}</script>';
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(html),"Upload File");
}
Post a Comment for "Calling Image File On Google App Scripts To Upload Into Googledrive"