Upload file to Google Sheet - ajax

Question

I am trying to upload a PDF file to Google Drive and insert the link to the file in Google Sheets. Here is the ajax:
$.ajax({
type: 'POST',
url: 'https://script.google.com/macros/s/AKfycbxyjjBv84uONFouZaiNeC2xwoMPP3p-3dzYxbQBCbJnEza0aPn-/exec',
data: serializedData,
success: function(result) {
var myMessage = $(document.activeElement).attr('id');
$('#sucessMessage2').html('<div class=\"successActive\">Your application has been successfully sent</div>');
document.getElementById("regform").reset();
},
error : function(error) {
alert('Error: Something went wrong. Please refresh the page and try again');
}
});
Here is the HTML:
<form id="regform">
<input id="FirstName" tabindex="1" name="FirstName" type="text" placeholder="First Name *" />
<input id="LastName" tabindex="2" name="LastName" type="text" placeholder="Last Name *" />
<input id="Occupation" tabindex="3" name="Occupation" type="text" placeholder="Occupation" />
<input name="Resume" type="file" tabindex="4" /><br/>
<div class="successMessage" id="sucessMessage2"></div>
<input class="btn-submit" id="submitFormTwo" tabindex="5" type="submit" value="Submit Application to Rent" />
</form>
And Code.gs:
var SHEET_NAME = "Sheet1";
var SCRIPT_PROP = PropertiesService.getScriptProperties(); // new property service
function doGet(e){
return handleResponse(e);
}
function doPost(e){
return handleResponse(e);
}
function handleResponse(e) {
var lock = LockService.getPublicLock();
lock.waitLock(30000); // wait 30 seconds before conceding defeat.
try {
var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
var sheet = doc.getSheetByName(SHEET_NAME);
var headRow = e.parameter.header_row || 1;
var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
var nextRow = sheet.getLastRow()+1; // get next row
var row = [];
for (i in headers){
if (headers[i] == "Timestamp"){ // special case if you include a 'Timestamp' column
row.push(new Date());
} else { // else use header name to get data
row.push(e.parameter[headers[i]]);
}
}
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
return ContentService
.createTextOutput(JSON.stringify({"result":"success", "row": nextRow}))
.setMimeType(ContentService.MimeType.JSON);
} catch(e){
return ContentService
.createTextOutput(JSON.stringify({"result":"error", "error": e}))
.setMimeType(ContentService.MimeType.JSON);
} finally { //release lock
lock.releaseLock();
}
}
function setup() {
var doc = SpreadsheetApp.getActiveSpreadsheet();
SCRIPT_PROP.setProperty("key", doc.getId());
}
Everything is populating in the Google Sheet, but I have no idea how to get the Resume to upload to Google Drive and add the link to the Google Sheet.

Answer 1

You can upload a file to drive with a combination of FileReader and google.script.run as following:
Modify <input name="Resume" type="file" tabindex="4" /><br/>
to
<input id = "pdf" name="Resume" type="file" tabindex="4" /><br/>
Modify
<input class="btn-submit" id="submitFormTwo" tabindex="5" type="submit" value="Submit Application to Rent" />
to
<input class="btn-submit" id="submitFormTwo" tabindex="5" type="submit" onClick="formSubmit()" value="Submit Application to Rent" />
Write the javascript function:
function formSubmit() {
var pdf = document.getElementById("pdf").files[0];
var reader = new FileReader();
if (pdf) {
reader.readAsDataURL(pdf);
reader.onloadend = function () {
google.script.run.getResume(reader.result);
}
}
}
In Code.gs, add the function
function getResume(pdf){
var mimeType = pdf.substring(5,pdf.indexOf(';'));
var bytes = Utilities.base64Decode(pdf.substr(pdf.indexOf('base64,')+7));
var title='my_pdf';
var blob = Utilities.newBlob(bytes, mimeType, title);
var file=DriveApp.createFile(blob);
var link = file.getUrl();
Logger.log(link);
}
Integrate link into your existing code as desired, e.g. push it into row and into the spreadsheet.
Explanation: You convert with FileReader the content of the pdf file
into a data URL. Apps Script can use this data URL to read the file as
a blob and convert the blob into a file on your drive.
UPDATE
A sample how to pass the form data completely with google.script.run without Ajax:
Index.html:
<form id="regform">
<input id="FirstName" tabindex="1" name="FirstName" type="text" placeholder="First Name *" />
<input id="LastName" tabindex="2" name="LastName" type="text" placeholder="Last Name *" />
<input id="Occupation" tabindex="3" name="Occupation" type="text" placeholder="Occupation" />
<input id = "pdf" name="Resume" type="file" tabindex="4" /><br/>
<input class="btn-submit" id="submitFormTwo" tabindex="5" type="submit" onClick="formSubmit()" value="Submit Application to Rent" />
</form>
<script>
function formSubmit() {
var firstName = document.getElementById("FirstName").value;
var lastName = document.getElementById("LastName").value;
var occupation = document.getElementById("Occupation").value;
var pdf = document.getElementById("pdf").files[0];
var reader = new FileReader();
if (pdf) {
reader.readAsDataURL(pdf);
reader.onloadend = function () {
google.script.run.withSuccessHandler(success).withFailureHandler(error).getResume(firstName, lastName, occupation, reader.result);
}
}
}
function success(){
alert ("Your application has been successfully sent");
}
function error(){
alert ("There was an error");
}
</script>
Code.gs
function doGet(){
return HtmlService.createHtmlOutput("index.html");
}
function getResume(firstName, lastName, occupation, pdf){
var mimeType = pdf.substring(5,pdf.indexOf(';'));
var bytes = Utilities.base64Decode(pdf.substr(pdf.indexOf('base64,')+7));
var title='my_pdf';
var blob = Utilities.newBlob(bytes, mimeType, title);
var file=DriveApp.createFile(blob);
var link = file.getUrl();
var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
var sheet = doc.getSheetByName(SHEET_NAME);
var values = [firstName, lastName, occupation, link];
var nextRow = sheet.getLastRow()+1;
sheet.getRange(nextRow, 1, 1, values.length).setValues([values]);
}
function setup() {
var doc = SpreadsheetApp.getActiveSpreadsheet();
SCRIPT_PROP.setProperty("key", doc.getId());
}