How to capture uploaded file in post request to Google Apps Script?

Question

I am trying to build a script to save data (text + image + pdf) from an HTML form (NOT Google Form).

I have the following function to upload a file:

function upload(x) {
  var destination_id = 'folder_id'
  var destination = DriveApp.getFolderById(destination_id)
  
  var contentType = 'image/png'
  var img = x.getAs(contentType)
  destination.createFile(img)
}

Inside my doPost function I am calling the above upload function like this:

upload(e.parameter.img)

I have an input of type file with a name and id of img. I also have the following event listener to prepare the body of the POST request:

form.addEventListener('submit', e => {
      e.preventDefault()
      let fd = new FormData(form)
      
      fetch(scriptURL, { method: 'POST', body: fd})
        .then(response => console.log('Success!', response))
        .catch(error => console.error('Error!', error.message))
    })

When I submit my form, my text gets saved, but the file is not uploaded. I do not see any errors in the console either. What am I doing wrong? Is there an easier alternative to uploading form data to Google Drive?

I think you're not retrieving the data correctly on the web app side. `e.parameter.img` would be taking the data from the url parameter `img`, for example it would be equal to the string `sometext` for the url `https://script.google.com/a/domain/macros/s/XXXXXXXXXXXX/exec?img=sometext`. The post data should be in `e.parameters.data` but you will need to decode it using `Utilities.base64Decode(e.parameters.data)`. Can you confirm this? — Rafa Guillermo, Jul 07 '20 at 14:32
You can see a list of the request parameters [here](https://developers.google.com/apps-script/guides/web#request_parameters) — Rafa Guillermo, Jul 07 '20 at 14:33
@RafaGuillermo so the line would be `upload(Utilities.base64Decode(e.parameters.img[0]))` ? Since `e.parameters` returns arrays of values? — MiniGunnR, Jul 07 '20 at 14:54
I think that `e.parameters.img` will be empty looking at your code snippets. Can you Log the contents of `e` and paste it? — Rafa Guillermo, Jul 07 '20 at 15:01
@RafaGuillermo Update: It's still the same. In chrome dev tools, Network tab, Form Data shows `img: (binary)`. So I think the file is being passed to the backend. — MiniGunnR, Jul 07 '20 at 15:01
@RafaGuillermo This is very silly of me. Could you please tell me how to log the contents of `e`? — MiniGunnR, Jul 07 '20 at 15:02
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/217394/discussion-between-rafa-guillermo-and-minigunnr). — Rafa Guillermo, Jul 07 '20 at 15:02

score 2 · Answer 1 · answered Jul 07 '20 at 15:09

2

type=file don't seem to be currently supported. You can workaround this using FileReader api on the client side to convert file data to a base64 encoded websafe string and send the data as string or a byte array.

How to capture uploaded file in post request to Google Apps Script?

1 Answers1