bahattab/forms.html

## forms.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_blank">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Google File Upload by CTRLQ.org</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
    <style>
      .disclaimer{width: 480px; color:#646464;margin:20px auto;padding:0 16px;text-align:center;font:400 12px Roboto,Helvetica,Arial,sans-serif}.disclaimer a{color:#009688}#credit{display:none}
    </style>
  </head>
  <body>

    <!-- Written by Amit Agarwal amit@labnol.org -->

    <form class="main" id="form" novalidate="novalidate" style="max-width: 480px;margin: 40px auto;">
      <div id="forminner">
        <div class="row">
          <div class="col s12">
            <h5 class="center-align teal-text">Upload Files to my Google Drive</h5>
            <p class="disclaimer">This <a href="http://www.labnol.org/internet/file-upload-google-forms/29170/">File Upload Form</a> (<a href="https://youtu.be/C_YBBupebvE">tutorial</a>) is powered by <a href="https://ctrlq.org/code/19747-google-forms-upload-files" target="_blank">Google Scripts</a></p>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <input id="name" type="text" name="Name" class="validate" required="" aria-required="true">
            <label for="name">Name</label>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12">
            <input id="email" type="email" name="Email" class="validate" required="" aria-required="true">
            <label for="email">Email Address</label>
          </div>
        </div>

        <div class="row">
          <div class="file-field input-field col s12">
            <div class="btn">
              <span>File</span>
              <input id="files" type="file">
            </div>
            <div class="file-path-wrapper">
              <input class="file-path validate" type="text" placeholder="Select a file on your computer">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="input-field col s6">
            <button class="waves-effect waves-light btn submit-btn" type="submit" onclick="submitForm(); return false;">Submit</button>
          </div>
        </div>
        <div class="row">
          <div class="input-field col s12" id = "progress">
          </div>
        </div>
      </div>
      <div id="success" style="display:none">
        <h5 class="left-align teal-text">File Uploaded</h5>
        <p>Your file has been successfully uploaded.</p>
        <p>The <a href="http://www.labnol.org/internet/file-upload-google-forms/29170/">pro version</a> (see <a href="http://j.mp/GoogleFormsDemo">demo form</a>) includes a visual drag-n-drop form builder, CAPTCHAs, the form responses are saved in a Google Spreadsheet and respondents can upload multiple files of any size.</p>
        <p class="center-align"><a  class="btn btn-large" href="https://gum.co/GA14?wanted=true" target="_blank">Upgrade to Pro</a></p>
      </div>
    </form>

    <div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
      <a class="btn-floating btn-large red">
        <i class="large material-icons">menu</i>
      </a>
      <ul>
        <li><a class="btn-floating red"  href="https://gum.co/GA14" target="_blank" title="Buy License - File Upload Form"><i class="material-icons">monetization_on</i></a></li>
        <li><a class="btn-floating blue"  href="https://youtu.be/C_YBBupebvE" target="_blank" title="Video Tutorial"><i class="material-icons">video_library</i></a></li>
        <li><a class="btn-floating green" href="http://www.labnol.org/internet/file-upload-google-forms/29170/" target="_blank" title="How to Create File Upload Forms"><i class="material-icons">help</i></a></li>
      </ul>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
    <script src="https://gumroad.com/js/gumroad.js"></script>

    <script>

      var file,
          reader = new FileReader();

      reader.onloadend = function(e) {
        if (e.target.error != null) {
          showError("File " + file.name + " could not be read.");
          return;
        } else {
          google.script.run
            .withSuccessHandler(showSuccess)
            .uploadFileToGoogleDrive(e.target.result, file.name, $('input#name').val(), $('input#email').val());
        }
      };

      function showSuccess(e) {
        if (e === "OK") {
          $('#forminner').hide();
          $('#success').show();
        } else {
          showError(e);
        }
      }

      function submitForm() {

        var files = $('#files')[0].files;

        if (files.length === 0) {
          showError("Please select a file to upload");
          return;
        }

        file = files[0];

        if (file.size > 1024 * 1024 * 5) {
          showError("The file size should be < 5 MB. Please <a href='http://www.labnol.org/internet/file-upload-google-forms/29170/' target='_blank'>upgrade to premium</a> for receiving larger files in Google Drive");
          return;
        }

        showMessage("Uploading file..");

        reader.readAsDataURL(file);

      }

      function showError(e) {
        $('#progress').addClass('red-text').html(e);
      }

      function showMessage(e) {
        $('#progress').removeClass('red-text').html(e);
      }


    </script>

  </body>

</html>

## server.gs
/*

    RECEIVE FILES IN GOOGLE DRIVE
    - - - - - - - - - - - - - - -

    Tutorial: www.labnol.org/awesome

    Twitter: @labnol

    Email: amit@labnol.org

*/

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('forms.html').setTitle("Google File Upload by CTRLQ.org");
}


function uploadFileToGoogleDrive(data, file, name, email) {

  try {

    var dropbox = "Received Files";
    var folder, folders = DriveApp.getFoldersByName(dropbox);

    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }

    /* Credit: www.labnol.org/awesome */

    var contentType = data.substring(5,data.indexOf(';')),
        bytes = Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)),
        blob = Utilities.newBlob(bytes, contentType, file),
        file = folder.createFolder([name, email].join(" ")).createFile(blob);

    return "OK";

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

}
	<!DOCTYPE html>
	<html>
	<head>
	<base target="_blank">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Google File Upload by CTRLQ.org</title>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
	<style>
	.disclaimer{width: 480px; color:#646464;margin:20px auto;padding:0 16px;text-align:center;font:400 12px Roboto,Helvetica,Arial,sans-serif}.disclaimer a{color:#009688}#credit{display:none}
	</style>
	</head>
	<body>

	<!-- Written by Amit Agarwal amit@labnol.org -->

	<form class="main" id="form" novalidate="novalidate" style="max-width: 480px;margin: 40px auto;">
	<div id="forminner">
	<div class="row">
	<div class="col s12">
	<h5 class="center-align teal-text">Upload Files to my Google Drive</h5>
	<p class="disclaimer">This <a href="http://www.labnol.org/internet/file-upload-google-forms/29170/">File Upload Form</a> (<a href="https://youtu.be/C_YBBupebvE">tutorial</a>) is powered by <a href="https://ctrlq.org/code/19747-google-forms-upload-files" target="_blank">Google Scripts</a></p>
	</div>
	</div>
	<div class="row">
	<div class="input-field col s12">
	<input id="name" type="text" name="Name" class="validate" required="" aria-required="true">
	<label for="name">Name</label>
	</div>
	</div>
	<div class="row">
	<div class="input-field col s12">
	<input id="email" type="email" name="Email" class="validate" required="" aria-required="true">
	<label for="email">Email Address</label>
	</div>
	</div>

	<div class="row">
	<div class="file-field input-field col s12">
	<div class="btn">
	<span>File</span>
	<input id="files" type="file">
	</div>
	<div class="file-path-wrapper">
	<input class="file-path validate" type="text" placeholder="Select a file on your computer">
	</div>
	</div>
	</div>

	<div class="row">
	<div class="input-field col s6">
	<button class="waves-effect waves-light btn submit-btn" type="submit" onclick="submitForm(); return false;">Submit</button>
	</div>
	</div>
	<div class="row">
	<div class="input-field col s12" id = "progress">
	</div>
	</div>
	</div>
	<div id="success" style="display:none">
	<h5 class="left-align teal-text">File Uploaded</h5>
	<p>Your file has been successfully uploaded.</p>
	<p>The <a href="http://www.labnol.org/internet/file-upload-google-forms/29170/">pro version</a> (see <a href="http://j.mp/GoogleFormsDemo">demo form</a>) includes a visual drag-n-drop form builder, CAPTCHAs, the form responses are saved in a Google Spreadsheet and respondents can upload multiple files of any size.</p>
	<p class="center-align"><a class="btn btn-large" href="https://gum.co/GA14?wanted=true" target="_blank">Upgrade to Pro</a></p>
	</div>
	</form>

	<div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
	<a class="btn-floating btn-large red">
	<i class="large material-icons">menu</i>
	</a>
	<ul>
	<li><a class="btn-floating red" href="https://gum.co/GA14" target="_blank" title="Buy License - File Upload Form"><i class="material-icons">monetization_on</i></a></li>
	<li><a class="btn-floating blue" href="https://youtu.be/C_YBBupebvE" target="_blank" title="Video Tutorial"><i class="material-icons">video_library</i></a></li>
	<li><a class="btn-floating green" href="http://www.labnol.org/internet/file-upload-google-forms/29170/" target="_blank" title="How to Create File Upload Forms"><i class="material-icons">help</i></a></li>
	</ul>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
	<script src="https://gumroad.com/js/gumroad.js"></script>

	<script>

	var file,
	reader = new FileReader();

	reader.onloadend = function(e) {
	if (e.target.error != null) {
	showError("File " + file.name + " could not be read.");
	return;
	} else {
	google.script.run
	.withSuccessHandler(showSuccess)
	.uploadFileToGoogleDrive(e.target.result, file.name, $('input#name').val(), $('input#email').val());
	}
	};

	function showSuccess(e) {
	if (e === "OK") {
	$('#forminner').hide();
	$('#success').show();
	} else {
	showError(e);
	}
	}

	function submitForm() {

	var files = $('#files')[0].files;

	if (files.length === 0) {
	showError("Please select a file to upload");
	return;
	}

	file = files[0];

	if (file.size > 1024 * 1024 * 5) {
	showError("The file size should be < 5 MB. Please <a href='http://www.labnol.org/internet/file-upload-google-forms/29170/' target='_blank'>upgrade to premium</a> for receiving larger files in Google Drive");
	return;
	}

	showMessage("Uploading file..");

	reader.readAsDataURL(file);

	}

	function showError(e) {
	$('#progress').addClass('red-text').html(e);
	}

	function showMessage(e) {
	$('#progress').removeClass('red-text').html(e);
	}


	</script>

	</body>

	</html>
	/*

	RECEIVE FILES IN GOOGLE DRIVE
	- - - - - - - - - - - - - - -

	Tutorial: www.labnol.org/awesome

	Twitter: @labnol

	Email: amit@labnol.org

	*/

	function doGet(e) {
	return HtmlService.createHtmlOutputFromFile('forms.html').setTitle("Google File Upload by CTRLQ.org");
	}


	function uploadFileToGoogleDrive(data, file, name, email) {

	try {

	var dropbox = "Received Files";
	var folder, folders = DriveApp.getFoldersByName(dropbox);

	if (folders.hasNext()) {
	folder = folders.next();
	} else {
	folder = DriveApp.createFolder(dropbox);
	}

	/* Credit: www.labnol.org/awesome */

	var contentType = data.substring(5,data.indexOf(';')),
	bytes = Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)),
	blob = Utilities.newBlob(bytes, contentType, file),
	file = folder.createFolder([name, email].join(" ")).createFile(blob);

	return "OK";

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

	}