Develop Reference

Catching SQL errors and preventing a form from being submitted

I have a little application that allows users to search for locations on a mac submit comments to a CartoDB SQL database (PostgreSQL) http://docs.cartodb.com/cartodb-platform/sql-api.html using an HMTL form, JavaScript and SQL (and a little PHP to make the API connection to CartoDB). It works great for vast majority of users, but some submissions are not coming through.
I have no idea why the SQL submissions are working sometimes and not others, works perfectly every time for me. Although I have tracked one issue down to Safari 5.1, but I think it must be happening in other browsers too. The main problem is I can't see any errors ANYWHERE, so it's impossible to track down.
So here are my questions:
1. Is there any way of catching SQL errors and preventing the form from being submitted?
2. Is there any way of seeing SQL errors so I can track down the problem?
Below is a snippet of the code I am using to submit the comments:
var tblName = "comment_collection"
var usrName = "***dney"
// FORM
$("#allSubmitBtn").click(function (e) {
//CHECK IF has a comment
if (!notEmpty(document.getElementById('description1'))) {
alert('Please enter a comment.');
return false;
}
if (!notEmpty(document.getElementById('latlongit1'))) {
alert('Sorry, there has been an error, please search for a location again.');
return false;
} else {
currentNeighborhood = $('#neighborhoodName1').val();
parcel = $('#parcel_id1').val();
address = $('#pre_address1').val();
userAddress = $('#UserAddress1').val();
phoneNum = $('#phone1').val();
emailAdd = $('#emailAddress1').val();
userType = $('#userType1').val();
otherUser = $('#otherUserType1').val();
currentDescription = $('#description1').val();
latlongy = $("input[name='latlongit1']").val();
explainType = $('#explainType').val();
currentProject = selectedCity.name;
commentType = new Array();
$("input:checkbox[name=commentType]:checked").each(function () {
commentType.push($(this).val());
});
var sql = "INSERT INTO " + tblName + " (the_geom, project, description, name,comment_address,parcel_id,phone_number,email_address,comment_type,comment_type_other,user_type,user_type_other,profile_address,flag,loved) VALUES (ST_SetSRID(ST_GeomFromGeoJSON('";
// var a = layer.getLatLng();
// console.log(a);
var sql2 = '{"type":"Point","coordinates":[' + latlongy + "]}'),4326),'" + currentProject + "','" + (currentDescription.replace(/'/g, "''")).replace(/"/g, "''") + "','" + (currentNeighborhood.replace(/'/g, "''")).replace(/"/g, "''") + "','" + address + "','" + parcel + "','" + phoneNum + "','" + emailAdd + "','" + commentType + "','" + explainType + "','" + userType + "','" + otherUser + "','" + userAddress + "','false','0')";
var pURL = sql + sql2;
console.log(pURL);
submitToProxy(pURL);
alert("Your Comments have been submitted");
return true;
}
});

here is the Github repo the tutorial is based off. Security is a MAJOR issue and is mentioned right off the bat with this tutorial. It is more of an illustration than anything, anyone implementing it should modify the scripts to be more secure.
Check out this pull request and try to create a solution from it. It addresses the issue to a degree. It moves more of the query into the PHP scripts and only allows field names in from the browser.
https://github.com/enam/neighborhoods/pull/4

This is incredibly dangerous/bad code. You're building sql on the client and sending it to the server to be executed. What's to stop someone from popping up their js console and doing submitToProxy('DROP DATABASE DATABASE()')?
Boom goes your site, boo hoo, too bad.
And even if you DON'T nuke this code from orbit, just to be sure it's really dead, and keep using it, you can't trap SQL exceptions, because they occur on the server, not in your client. At best your SERVER has to check for errors, and send back an appropriate message, e.g.
result = run_query(dangerous ql from user);
if (error occured) {
return json_encode('error' => true, 'reason' => 'someone set us up the bomb'));
} else {
return json_encode('error' => false, 'data' => query results);
}
and then your client-side ajax has to do
$.ajax(....
success: function (data) {
if (data.error) { alert('boom!'); }
else {... do stuff with data ...}

Google Script send form values by email, error: cannot read property "namedValues"

Project key: MyvPlY2KvwGODjsi4szfo389owhmw9jII
I am trying to run a script that sends the contents of my form by email each time the form is submitted. I was following the instructions from this link below exactly until I started getting errors and I received advice to change my script to open spreadsheets by id:
http://www.snipe.net/2013/04/email-contents-google-form/
When I complete the form, it is supposed to email the contents to my email.
The problem I am now having is that the function which goes through the form values doesn't work. It's returning the error
TypeError: Cannot read property "namedValues" from undefined. (line 15, file "Code")"
in regards to the piece of code below:
for(var i in headers)
message += headers[i] + ': '+ e.namedValues[headers[i]].toString() + "\n\n";
I am not too familiar with Google Apps Scripts so I'm not sure how to work around this issue either. Is there anything you recommend? I have included the entire script below.
function sendFormByEmail(e)
{
// Remember to replace this email address with your own email address
var email = "sample#email.com";
var s = SpreadsheetApp.openById("1hOqnK0IVa2WT6-c-MY0jyGGSpIJIV2yzTXdQYX4UQQA").getSheets()[0];
var headers = s.getRange(1,1,1,s.getLastColumn()).getValues()[0];
var message = "";
var subject = "New User Form";
// The variable e holds all the form values in an array.
// Loop through the array and append values to the body.
for(var i in headers)
message += headers[i] + ': '+ e.namedValues[headers[i]].toString() + "\n\n";
// Insert variables from the spreadsheet into the subject.
// In this case, I wanted the new hire's name and start date as part of the
// email subject. These are the 3rd and 16th columns in my form.
// This creates an email subject like "New Hire: Jane Doe - starts 4/23/2013"
subject += e.namedValues[headers[2]].toString() + " - starts " + e.namedValues[headers[15]].toString();
// Send the email
MailApp.sendEmail(email, subject, message);
}

The function appears to be undefined as 'e' is not received as part of the function context. You'll need to set a trigger for the submission of the form, and send the information to the function. You can use the following code:
/* Send Confirmation Email with Google Forms */
function Initialize() {
var triggers = ScriptApp.getProjectTriggers();
for (var i in triggers) {
ScriptApp.deleteTrigger(triggers[i]);
}
ScriptApp.newTrigger("SendConfirmationMail")
.forSpreadsheet(SpreadsheetApp.getActiveSpreadsheet())
.onFormSubmit()
.create();
}
function SendConfirmationMail(e) {
try {
var ss, cc, sendername, subject, columns;
var header, message, value, textbody, sender, itemID, url;
// This is your email address and you will be in the CC
cc = "name#email.com";
// This will show up as the sender's name
sendername = "name to be displayed as sender";
// Optional but change the following variable
// to have a custom subject for Google Docs emails
subject = "Choose an approppiate subject";
// This is the body of the auto-reply
message = "";
ss = SpreadsheetApp.getActiveSheet();
columns = ss.getRange(1, 1, 1, ss.getLastColumn()).getValues()[0];
// This is the submitter's email address
sender = e.namedValues["Username"].toString();
// Only include form values that are not blank
for ( var keys in columns ) {
var key = columns[keys];
//Use this to look for a particular named key
if ( e.namedValues[key] ) {
if ( key == "Username" ) {
header = "The user " + e.namedValues[key] + " has submitted the form, please review the following information.<br />";
} else {
message += key + ' ::<br /> '+ e.namedValues[key] + "<br />";
}
}
}
}
textbody = header + message;
textbody = textbody.replace("<br>", "\n");
Logger.log("Sending email");
GmailApp.sendEmail(cc, subject, textbody,
{cc: cc, name: sendername, htmlBody: textbody});
} catch (e) {
Logger.log(e.toString());
}
}

I have the same error and it took me some time to figure out how to solve it.
The problem is that you are writing your code in the form, and you should do it in your spreadsheet.
When I created the function inside the form and registered the event, it was called but the parameter didn't have the same structure (and didn't have the field namedValues, so the error "Cannot read property "namedValues" from undefined"). A better way to check this is to log the object as a JSON string:
Logger.log("e: " + JSON.stringify(e));
So, the steps I have made to correct this issue:
Create a spreadsheet
Create the form through the spreadsheet (inside the spreadsheet select Tools->Create a form), and create your form
Go back to your spreadsheet, and create the script (Tools->Script Editor)
Write your function
Register the function (Edit->Current Project's Triggers): function sendFormByEmail, Event: From Spreadsheet -> On form submit
Hope this helps

There is an error in this line of code:
message += headers[i] + ': '+ e.namedValues[headers[i]].toString() + "\n\n";
it's this part:
e.namedValues[headers[i]].toString()
I'm just guessing that you want:
e.namedValues + [headers[i]].toString()
You're missing a plus sign if you want to concatenate the values.

how do I remove an item that is set to upload?

I have created an uploader using javascript and php. The problem is that I only want to allow specific file types. I have it letting the user know the file is not valid but I am not sure how to remove the file from being uploaded. Can anyone tell me how to remove the upload?
multiUploader.prototype._preview = function(data) {
this.items = data;
if (this.items.length > 0) {
var html = "";
var uId = "";
for (var i = 0; i < this.items.length; i++) {
uId = this.items[i].name._unique();
if (typeof this.items[i] != undefined) {
if (self._validate(this.items[i].type) <= 0) {
var errorClass = '<h3 class="text-danger">Invalid file format' + this.items[i].name + '</h3>'
jQuery(".errorContent").append(errorClass);
jQuery.remove(this.items[i]);
}
html += '<div class="dfiles" rel="' + uId + '"><h5>' + this.items[i].name + '</h5><div id="' + uId + '" class="progress" style="display:none;"></div></div>';
}
}
jQuery("#dragAndDropFiles").append(html);
}
}
This is not all of the code, just the function that displays my error message and also shows the uploaded file on the page. I tried it with jQuery.remove but it does not work. Any ideas are appreciated

what is a "file type"? I could send you a .php file that ends in .jpg, would you accept that? (I hope not!). Let the user upload the files with a warning that files X, Y, Z are not going to be accepted based on extension mismatch. Then actually test their content to see if the files are truly what their extension claims, because -and this part is important- your javascript in no way guarantees that what you're going to get is what you wrote your scripts to allow. Changing your script in my browser is a matter of opening my devtools and rewriting your script, then hitting ctrl-s. Now my browser will be running my code, not your code, and happily upload my files anyway.
Always, always, server-verify the user data.

Google forms auto-email not showing up

My company has a google form that we use to submit requests for data pulls. I created a script that auto emails form responses to myself, as well as a copy to the submitter. The script is:
function Initialize() {
var triggers = ScriptApp.getScriptTriggers();
for(var i in triggers) {
ScriptApp.deleteTrigger(triggers[i]);
}
ScriptApp.newTrigger("SendGoogleForm")
.forSpreadsheet(SpreadsheetApp.getActiveSpreadsheet())
.onFormSubmit()
.create();
}
function SendGoogleForm(e)
{
try
{
// You may replace this with another email address
var email = "My Email Goes here"
var Owner = e.namedValues["Owner:"].toString();
cc = email + "," + Owner
Adv = e.namedValues["Advertiser Name:"].toString();
IO = e.namedValues["IO Name:"].toString();
Tog = "Pixel Request " + Adv + " " + IO;
// Optional but change the following variable
// to have a custom subject for Google Form email notifications
var subject = Tog;
var s = SpreadsheetApp.getActiveSheet();
var columns = s.getRange(1,1,1,s.getLastColumn()).getValues()[0];
var message = "";
// Only include form fields that are not blank
for ( var keys in columns ) {
var key = columns[keys];
if ( e.namedValues[key] && (e.namedValues[key] != "") ) {
message += key + ' :: '+ e.namedValues[key] + "\n\n";
}
}
// This is the MailApp service of Google Apps Script
// that sends the email. You can also use GmailApp for HTML Mail.
MailApp.sendEmail(cc, subject, message);
} catch (e) {
Logger.log(e.toString());
}
}
The script sends the emails without a problem. However, while the email sent to myself shows up in my sent mail, no copy is delivered to my inbox and it is marked as read; this is a problem because then I do not know that requests have been submitted which was the point of this creation. This seems anomalous as normally emails to yourself will typically show up in the inbox as unread. Does anyone know a way I might be able to fix this?

This is not an issue with the Google Script. This is probably how Gmail handles email where the sender and recipient is you.

Google Apps Script: Workflow approval Selecting approval broken

I'm working to expand on the workflow script posted here...
James Ferreira Workflow video.
I've expanded the script and all is working fine regarding email, but I'm running into an issue with the doGet() function not working corretly.
Here is the code from the video: (mycode for the sendEmail is different and works fine, as it uses and document template.
function sendEmail(e) {
var email = e.values[1];
var Item = e.values[2];
var cost = e.values[3];
var url = '<ENTER YOUR PUBLISHED URL>';
var approve = url + '&approval=true'+'&reply='+email;
var reject = url + '&approval=false'+'&reply='+email;
var html = "<body>"+
"<h2>Please review</h2><br />"+
Item +": " + cost+ "<br />"+
"Approve<br />"+
"Reject<br />"+
"</body>";
MailApp.sendEmail("jjones#beaconcloudsolutions.com", "Approval Request",
"What no html?", {htmlBody: html});
}
function doGet(e){
var answer = (e.parameter.approval == 'true') ? 'Buy it!' : 'Not this time, Keep saving';
MailApp.sendEmail(e.parameter.reply, "Purchase Request",
"Your manager said: "+ answer);
var app = UiApp.createApplication();
app.add(app.createHTML('<h2>An email was sent to '+ e.parameter.reply + ' saying: '+ answer + '</h2>'))
return app
}
So when the script runs, i get the email that shows the links for approval / rejected, but when I select the link for approval or / rejected i get
"Sorry, the page (or document) you have requested does not exist." " Please check the address and try again."
This link should be redirect to the published webapp, noted in the var URL and append either the var approve or reject to it and then just display a basic HTML page.
Any suggestions on what is wrong? the script is authorized..

What does the address bar say when you click on the link from the email? Perhaps something is malformed or not properly encoded.
My gut feeling right now is that there is a missing '?' before you append any params.
Perhaps try this -
//note the ? instead of &
var approve = url + '?approval=true'+'&reply='+email;
var reject = url + '?approval=false'+'&reply='+email;