Upload an input image taken from webapp into google drive with google script-CodePudding

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.

CodePudding user response：

I believe your goal is as follows.

From 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?

Modified script 1:

Fortunately, the bug of the parse of HTML form has been removed. Ref By this, you can use the following modified script.

HTML & Javascript side:

<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>

Google Apps Script side:

function upload(e) {
  const filecreat = DriveApp.getFolderById("xxxxxxxxxxxxx").createFile(e.file);
  console.log("created file");
}

Modified script 2:

As another method, you can also use the following script.

HTML & Javascript side:

<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>

Google Apps Script side:

function upload(e) {
  const filecreat = DriveApp.getFolderById("xxxxxxxxxxxxx").createFile(Utilities.newBlob(...e));
  console.log("created file");
}

Note:

In your script, it seems that Web Apps is used. In this case, when you modified the Google Apps Script, please modify the deployment as a new version. By this, the modified script is reflected in Web Apps. Please be careful this.
You can see the detail of this in the report of "Redeploying Web Apps without Changing URL of Web Apps for new IDE".