HTML form file upload to Google Drive and save URL to google sheet -
i'm new world of google scripting, , have found great tutorials on how either: upload file google drive html form ii append new rows google sheet.
essentially trying to write basic html form collects few text fields , file attachment, file attachment uploaded google drive , url along other form text fields appended google sheet.
here html form working (based on tutorial found):
<!-- include google css package --> <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css"> <!-- can include own css styles --> <style> form { margin: 40px auto; } input { display:inline-block; margin: 20px; } </style> <script> // function called after form submitted function uploadfile() { document.getelementbyid('uploadfile').value = "uploading file.."; google.script.run .withsuccesshandler(fileuploaded) .uploadfiles(document.getelementbyid("labnol")); return false; } // function called after google script has executed function fileuploaded(status) { document.getelementbyid('labnol').style.display = 'none'; document.getelementbyid('output').innerhtml = status; } </script> <!-- html form --> <form id="labnol"> <!-- text input fields --> <input type="text" id="namefield" name="myname" placeholder="your name.."> <input type="email" id="emailfield" name="myemail" placeholder="your email.."> <!-- file input filed --> <input type="file" name="myfile"> <!-- submit button. calls server side function uploadfiles() on click --> <input type="submit" id="uploadfile" value="upload file" onclick="this.value='uploading..';uploadfile();"> </form> <!-- here results of form submission displayed --> <div id="output"></div>
and here google script (again, based on useful tutorial on blog)
/* script deployed web app , renders form */ function doget(e) { return htmlservice.createhtmloutputfromfile('form.html') .setsandboxmode(htmlservice.sandboxmode.native); // important file upload fail in iframe sandbox mode. } /* function process submitted form */ function uploadfiles(form) { try { /* name of drive folder files should saved */ var dropbox = "test form submissions"; var folder, folders = driveapp.getfoldersbyname(dropbox); /* find folder, create if folder not exist */ if (folders.hasnext()) { folder = folders.next(); } else { folder = driveapp.createfolder(dropbox); } /* file uploaded though form blob */ var blob = form.myfile; var file = folder.createfile(blob); //allocate variables submissions in sheet var namerecord = form.myname; var emailrecord = form.myemail; /* set file description name of uploader */ file.setdescription("uploaded " + form.myname); /* return download url of file once on google drive */ return "file uploaded " + file.geturl(); var uploadurl = file.geturl(); // } catch (error) { /* if there's error, show error message */ return error.tostring(); } //open spreadsheet based on url var googsheet = spreadsheetapp.openbyurl('https://docs.google.com/spreadsheets/d/17fuu1vuuxgcgs1tpsgpwdnxmhx3aefscmjx156hq5_u/edit?usp=sharing'); logger.log(googsheet.getname()); var sheet = googsheet.getsheets()[0]; sheet.appendrow(["james", "jim", "abc"]); }
my intuition slip lines of code in add form data specified sheet it's not working , must doing wrong :s
any advice appreciated ignorant business analyst new web programming :/
thanks
i had same problem, , link solved issue :
this update google script example upload file google sheets , macros.
in line in html defining submit button, change
id="uploadfile"
id="uploadfilebutton"
(there possibly collision between id of submit button , functionuploadfile()
)and change onclick trigger adding return false:
onclick="this.value='uploading..';uploadfile();return false;"
correspondingly, in code defining uploadfile() function, change
document.getelementbyid('uploadfile').value = "uploading file..";
to
document.getelementbyid('uploadfilebutton').value = "uploading file..";
a complete thread link: https://code.google.com/p/google-apps-script-issues/issues/detail?id=6177
regards venezuela
note: sorry bad english
Comments
Post a Comment