Google Apps Script to Upload Image to Google Drive Using HTML5 Forms in Browser Full Example

Welcome folks today in this blog post we will be uploading images to google drive using html5 forms in browser using javascript.All the full source code of the application is shown below.

Get Started

In order to get started you need to make an code.gs file and copy paste the following code

code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('form.html');
}

function doGet() {

return HtmlService.createHtmlOutputFromFile('form.html');

}

As you can see we are loading the form.html template file inside the browser we need to create the index.html file

index.html

<form>
  <input type="file" name="imageFile">
  <input type="submit" value="Upload" onclick="google.script.run.upload(this.parentNode)">
</form>

<form>

</form>

code.gs

function upload(e) {
  let destination_id = "1tjw5ZbZnU8aI263ZBMLFm8Z9qJMX5W8j"

  let img = e.imageFile

  let contentType = "image/jpeg"

  let destination = DriveApp.getFolderById(destination_id)

  destination.createFile(img)

}

function upload(e) {

let destination_id = "1tjw5ZbZnU8aI263ZBMLFm8Z9qJMX5W8j"

let img = e.imageFile

let contentType = "image/jpeg"

let destination = DriveApp.getFolderById(destination_id)

destination.createFile(img)

}

Here you need to replace the drive folder id inside your drive as shown below