I found something similar here, but it seems a lot more complicated than what I need.
I am uploading an image to a webapp and I would like to save the image into google drive.
I am having troubles to pass the file in a readable format for DriveApp.getFolderById("xxxxxxxxxxxxx").createFile(file); and I keep getting error. I do not know how to pass the file in the correct format.
HTML:
<input id = "output2" type="file" accept="image/*">
<script>
document.getElementById('output2').addEventListener('change', (e) => triggerF(e.target.files));
</script>
function triggerF(file) {
console.log("event triggered");
console.log(file.name);
google.script.run.withSuccessHandler(yourCallBack1).upload(file)}
function yourCallBack1() {
console.log("callback called");
}
GS:
function upload(e) {
const file = new Blob(e);
const filecreat = DriveApp.getFolderById("xxxxxxxxxxxxx").createFile(file);
console.log("created file");
}
UPDATE: Tanaike's solution #2 works for me. Please check below.
I believe your goal is as follows.
I am uploading an image to a webapp and I would like to save the image into google drive., you want to upload an image file using Web Apps.In this case, how about the following modification?
Fortunately, the bug of the parse of HTML form has been removed. Ref By this, you can use the following modified script.
<form><input id = "output2" name="file" type="file" accept="image/*"></form>
<script>
document.getElementById('output2').addEventListener('change', (e) => triggerF(e.target.parentNode));
function triggerF(file) {
console.log("event triggered");
google.script.run.withSuccessHandler(yourCallBack1).upload(file);
}
function yourCallBack1() {
console.log("callback called");
}
</script>
function upload(e) {
const filecreat = DriveApp.getFolderById("xxxxxxxxxxxxx").createFile(e.file);
console.log("created file");
}
As another method, you can also use the following script.
<input id = "output2" type="file" accept="image/*">
<script>
document.getElementById('output2').addEventListener('change', (e) => triggerF(e.target.files[0]));
function triggerF(file) {
console.log("event triggered");
const fr = new FileReader();
fr.readAsArrayBuffer(file);
fr.onload = (f) => {
google.script.run.withSuccessHandler(yourCallBack1).upload([[...new Int8Array(f.target.result)], file.type, file.name]);
};
}
function yourCallBack1() {
console.log("callback called");
}
</script>
function upload(e) {
const filecreat = DriveApp.getFolderById("xxxxxxxxxxxxx").createFile(Utilities.newBlob(...e));
console.log("created file");
}