0

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.

Filippo
  • 320
  • 2
  • 5
  • 22
  • Here's an example that collection receipt information including uploading an image of the receipt: https://stackoverflow.com/a/57020995/7215091 – Cooper Feb 05 '22 at 21:38
  • Thank you, I actually need it for the same purpose. I will use that example if I do not have other options, but I wanted to understand how to pass the file in a way to make my code work. – Filippo Feb 06 '22 at 00:12
  • First, I deeply apologize that my script was not useful for your situation. From your question, I proposed 2 modified scripts as the answer. Could you please confirm it? If those were not useful, I apologize. – Tanaike Feb 06 '22 at 00:20

1 Answers1

1

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".
Tanaike
  • 181,128
  • 11
  • 97
  • 165
  • Thank you!! I am going to try it later today and let you know if it works – Filippo Feb 07 '22 at 15:08
  • @Filippo Thank you for replying. If that was not useful, I apologize. – Tanaike Feb 08 '22 at 00:09
  • I am checking now the solution 1 but I am getting "InvalidArgumentError: Failed due to illegal value in property: 0" I think there is still an issue with the format of the file sent to the server side.. I will check solution 2 – Filippo Feb 08 '22 at 00:14
  • nice, solution #2 works! I would have preferred solution #1 to keep things simple, but still some issues there. Do you think you can correct #1? If not, you can remove it and I will accept the answer for solution #2. It will make it easier for users in future to find the correct answer only – Filippo Feb 08 '22 at 00:19
  • @Filippo Thank you for replying. I have to apologize for my poor English skill. Unfortunately, I cannot understand your issue from `I would have preferred solution #1 to keep things simple, but still some issues there. Do you think you can correct #1?`. Can I ask you about the detail of `still some issues there`? When Web Apps is used, pattern 1 can be used. But when the dialog and sidebar are used, pattern 1 cannot be used. I would be grateful if you can forgive my poor English skill. – Tanaike Feb 08 '22 at 00:30
  • I am not sure what you mean with WebApp is used, but I recommend to change the order of your solutions so that people will see solution #2 first. Solution #2 works all the time, while solution #1 does not work for me. – Filippo Feb 08 '22 at 00:32
  • @Filippo Thank you for replying. About `I am not sure what you mean with WebApp is used`, you can see it at [the official document](https://developers.google.com/apps-script/guides/web). Pattern 1 couldn't be used with V8 before. But, by a recent update, the bug was removed. So, now, pattern 1 can be used at Web Apps. But, as an important point, when the dialog and sidebar are used, pattern 1 cannot still be used. I believe that this issue will be resolved in the future update. – Tanaike Feb 08 '22 at 00:35