bpwebs/#Google Apps Script - Upload files to Google Drive

## #Google Apps Script - Upload files to Google Drive
Upload files to Google Drive using Google Apps Script Web Apps and save records in Google Sheets.

## Code.gs
/**
 * Upload files to Google Drive and save record to Google Sheet
 * By www.bpwebs.com
 * References: https://stackoverflow.com/a/26497772/2391195
 *             https://developers.google.com/apps-script/guides/html/communication#index.html_4
 */


var folderID = "root"; //Replace the "root"with folder ID to upload files to a specific folder
var sheetName = "Data"; //Replace the "Data" with your data sheet name

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}

/* @Include JavaScript and CSS Files */
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

function uploadFiles(formObject) {
  try {
    var folder = DriveApp.getFolderById(folderID);
    var sheet = SpreadsheetApp.getActive().getSheetByName(sheetName);
    var fileUrl = "";
    var fileName = "";

    //Upload file if exists and update the file url
    if (formObject.myFile.length > 0) {
      var blob = formObject.myFile;
      var file = folder.createFile(blob);
      file.setDescription("Uploaded by " + formObject.first_name);
      fileUrl = file.getUrl();
      fileName = file.getName();
    } else{
      fileUrl = "Record saved without a file";
    }

    //Saving records to Google Sheet
    sheet.appendRow([
      formObject.first_name,
      formObject.last_name,
      formObject.gender,
      formObject.dateOfBirth,
      formObject.email,
      formObject.phone,
      fileName,
      fileUrl,
      Utilities.formatDate(new Date(), "GMT+5:30", "yyyy-MM-dd'T'HH:mm:ss'Z'")]);

    // Return the URL of the saved file
    return fileUrl;

  } catch (error) {
    return error.toString();
  }
}

## Index.html
<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
  <?!= include('JavaScript'); ?>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-6">

        <form id="myForm" onsubmit="handleFormSubmit(this)">
          <p class="h4 mb-4 text-center">Contact Details</p>

          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="first_name">First Name</label>
              <input type="text" class="form-control" name="first_name" placeholder="Your full name..."/>
            </div>

            <div class="form-group col-md-6">
              <label for="last_name">Last Name</label>
              <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-md-6">
              <p>Gender</p>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="gender" id="male" value="male">
                <label class="form-check-label" for="male">Male</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="gender" id="female" value="female">
                <label class="form-check-label" for="female">Female</label>
              </div>
            </div>
            <div class="form-group col-md-6">
              <label for="dateOfBirth">Date of Birth</label>
              <input type="date" class="form-control" id="dateOfBirth" name="dateOfBirth">
            </div>
          </div>

          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" class="form-control" id="email" name="email" placeholder="Email">
          </div>

          <div class="form-group">
            <label for="phone">Phone Number</label>
            <input type="tel" class="form-control" id="phone" name="phone" placeholder="Phone Number">
          </div>

           <div class="form-group">
            <label for="FormControlFile">Photo</label>
            <input name="myFile" class="form-control-file" type="file" id="FormControlFile" />
           </div>
          <br>
          <button type="submit" class="btn btn-primary btn-block">Submit</button>
        </form>
        <br>
        <div id="output"></div>
      </div>
    </div>
  </div>
</body>
</html>

## JavaScript.html
<script>
  function preventFormSubmit() {
        var forms = document.querySelectorAll('form');
        for (var i = 0; i < forms.length; i++) {
          forms[i].addEventListener('submit', function(event) {
            event.preventDefault();
          });
        }
      }
  window.addEventListener('load', preventFormSubmit);

  function handleFormSubmit(formObject){
    google.script.run.withSuccessHandler(updateUrl).withFailureHandler(onFailure).uploadFiles(formObject);
  }

  function updateUrl(url) {
    var div = document.getElementById('output');
    if(isValidURL(url)){
      div.innerHTML = '<div class="alert alert-success" role="alert"><a href="' + url + '">File uploaded successfully!</a></div>';
      document.getElementById("myForm").reset();
    }else{
      //Show warning message if file is not uploaded or provided
      div.innerHTML = '<div class="alert alert-danger" role="alert">'+ url +'!</div>';
    }
  }

  function onFailure(error) {
    var div = document.getElementById('output');
    div.innerHTML = '<div class="alert alert-danger" role="alert">'+ error.message +'!</div>';
  }

  function isValidURL(string) {
    var res = string.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
    return (res !== null);
  }
</script>
	/**
	* Upload files to Google Drive and save record to Google Sheet
	* By www.bpwebs.com
	* References: https://stackoverflow.com/a/26497772/2391195
	* https://developers.google.com/apps-script/guides/html/communication#index.html_4
	*/


	var folderID = "root"; //Replace the "root"with folder ID to upload files to a specific folder
	var sheetName = "Data"; //Replace the "Data" with your data sheet name

	function doGet() {
	return HtmlService.createTemplateFromFile('Index').evaluate();
	}

	/* @Include JavaScript and CSS Files */
	function include(filename) {
	return HtmlService.createHtmlOutputFromFile(filename)
	.getContent();
	}

	function uploadFiles(formObject) {
	try {
	var folder = DriveApp.getFolderById(folderID);
	var sheet = SpreadsheetApp.getActive().getSheetByName(sheetName);
	var fileUrl = "";
	var fileName = "";

	//Upload file if exists and update the file url
	if (formObject.myFile.length > 0) {
	var blob = formObject.myFile;
	var file = folder.createFile(blob);
	file.setDescription("Uploaded by " + formObject.first_name);
	fileUrl = file.getUrl();
	fileName = file.getName();
	} else{
	fileUrl = "Record saved without a file";
	}

	//Saving records to Google Sheet
	sheet.appendRow([
	formObject.first_name,
	formObject.last_name,
	formObject.gender,
	formObject.dateOfBirth,
	formObject.email,
	formObject.phone,
	fileName,
	fileUrl,
	Utilities.formatDate(new Date(), "GMT+5:30", "yyyy-MM-dd'T'HH:mm:ss'Z'")]);

	// Return the URL of the saved file
	return fileUrl;

	} catch (error) {
	return error.toString();
	}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<base target="_top">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
	integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
	<?!= include('JavaScript'); ?>
	</head>

	<body>
	<div class="container">
	<div class="row">
	<div class="col-6">

	<form id="myForm" onsubmit="handleFormSubmit(this)">
	<p class="h4 mb-4 text-center">Contact Details</p>

	<div class="form-row">
	<div class="form-group col-md-6">
	<label for="first_name">First Name</label>
	<input type="text" class="form-control" name="first_name" placeholder="Your full name..."/>
	</div>

	<div class="form-group col-md-6">
	<label for="last_name">Last Name</label>
	<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name">
	</div>
	</div>

	<div class="form-row">
	<div class="form-group col-md-6">
	<p>Gender</p>
	<div class="form-check form-check-inline">
	<input class="form-check-input" type="radio" name="gender" id="male" value="male">
	<label class="form-check-label" for="male">Male</label>
	</div>
	<div class="form-check form-check-inline">
	<input class="form-check-input" type="radio" name="gender" id="female" value="female">
	<label class="form-check-label" for="female">Female</label>
	</div>
	</div>
	<div class="form-group col-md-6">
	<label for="dateOfBirth">Date of Birth</label>
	<input type="date" class="form-control" id="dateOfBirth" name="dateOfBirth">
	</div>
	</div>

	<div class="form-group">
	<label for="email">Email</label>
	<input type="email" class="form-control" id="email" name="email" placeholder="Email">
	</div>

	<div class="form-group">
	<label for="phone">Phone Number</label>
	<input type="tel" class="form-control" id="phone" name="phone" placeholder="Phone Number">
	</div>

	<div class="form-group">
	<label for="FormControlFile">Photo</label>
	<input name="myFile" class="form-control-file" type="file" id="FormControlFile" />
	</div>
	<br>
	<button type="submit" class="btn btn-primary btn-block">Submit</button>
	</form>
	<br>
	<div id="output"></div>
	</div>
	</div>
	</div>
	</body>
	</html>
	<script>
	function preventFormSubmit() {
	var forms = document.querySelectorAll('form');
	for (var i = 0; i < forms.length; i++) {
	forms[i].addEventListener('submit', function(event) {
	event.preventDefault();
	});
	}
	}
	window.addEventListener('load', preventFormSubmit);

	function handleFormSubmit(formObject){
	google.script.run.withSuccessHandler(updateUrl).withFailureHandler(onFailure).uploadFiles(formObject);
	}

	function updateUrl(url) {
	var div = document.getElementById('output');
	if(isValidURL(url)){
	div.innerHTML = '<div class="alert alert-success" role="alert"><a href="' + url + '">File uploaded successfully!</a></div>';
	document.getElementById("myForm").reset();
	}else{
	//Show warning message if file is not uploaded or provided
	div.innerHTML = '<div class="alert alert-danger" role="alert">'+ url +'!</div>';
	}
	}

	function onFailure(error) {
	var div = document.getElementById('output');
	div.innerHTML = '<div class="alert alert-danger" role="alert">'+ error.message +'!</div>';
	}

	function isValidURL(string) {
	var res = string.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
	return (res !== null);
	}
	</script>