For my good friend Katri at Helsinki Street Casting I recently developed an online casting form which has some clever features underneath an elegantly modest hood. The specifications seemed easy at first: integrate the form into an existing Squarespace page, have the response recorded in a Google spreadsheet and the uploaded photos put into a Google Drive folder.
Katri previously used an <iframe> from Form Plus, which posed three problems: first, it was ugly, and did not at all go well with the page’s over-all style. Second, being trapped inside an <iframe>, it did not display well on mobile or tablet devices. And third, it would cause an extra cost for a still not optimal solution as soon as the number of users would rise even moderately.
Being a rookie to Google Apps Script, I searched for accounts of how others had realised similar endeavours. The API documentation is excellent, and it’s easy to find various other web pages detailing how they tackled the problem. Just send a form data to your published Google Apps Script web app, implement a doPost(request) function, and you’re set. It seemed almost too easy!
Of course it was not so easy. Turns out, that gapps scripts only accept <input type="file"> POST-data if the form is served from the same apps script instance. So back to using an <iframe>? No way!
The solution was to employ a FileReader instance on the client side, and submit a base64-encoded string in a <input type="text">:
On top of that, the final implementation resizes the submitted images using a canvas object to limit the upload payload, and to display a preview before uploading. Also it assembles the form payload into a JavaScript object rather than submitting the serialised <form>.
This is not 100% “progressive enhancement”, because it does not work in case JavaScript is disabled, or no FileReader class is available. The support in current web browsers is excellent, so the latter should not be a great deal. For the former a noscript block notifiying the user proved to be an adequate workaround.
In its final form, the form (haha!) comprises one long copy&paste block with inline CSS and JS to be pasted into the Squarespace editor, a similar blob to go into a new Google Apps Script project, and a template spreadsheet.
The final page looks like that:
Go check it out at helsinkistreetcasting.com or takauma.fi/casting