CODEWITHSUNDEEP
google-apps-scriptpostdata
Erlend
Erlend

Reputation: 56

Google apps script strips characters away from postdata

When posting data to my google spreadsheet web app script, Google strips away the norwegian characters from the postdata. e.postData.contents is correct, but e.parameters is incorrect. See the code example below. When you press send, you will see that e.parameters and e.postData.contents returned by the google script are different.

To reproduce the problem with your own google spreadsheet web app:

  1. Make a copy of my google spreadsheet
  2. In the spreadsheet, select Tools->script editor
  3. In the script editor, select Publish->Deploy as web app
  4. In the dialog that opens, set "Who has access to the app" to "Anyone, even anonymous". Finally, press "Deploy".
  5. You are now told that you need to give permissions to the script. Press "Review permissions". A message tells you that you should only allow this script to run if you trust the developer. Click on "Advanced" and click on the link at the bootom. Click allow.
  6. In the new dialog that appears, copy the address of the "Current web app url".
  7. In the code sample, replace the variable actionscript with the address you copied in step 6.

var actionScript = "https://script.google.com/macros/s/AKfycbxW1qHugD1K4adTjGAEt1KqbcbAn1LlaCoWx6GtlNdsNO_E-rTO/exec";

$(document).ready(function(){
    var sendButton = $("#send");
    if(sendButton != null)
    {
			sendButton.click(handleSend);
    }
});

function handleSend(event) { 
  var data = $("#name").val();
  console.log(data);
  var postData = "name="+data;
  console.log(postData);


	request = $.ajax({
		url: actionScript,
		type: "post",
		data: postData,

		beforeSend: function () {
			console.log("Loading");
		},

		error: function (jqXHR, textStatus, errorThrown) {
			console.log(jqXHR);
			console.log(textStatus);
			console.log(errorThrown);
		},

		success: function (result) {
			console.log("success");
      var s = "<p>e.parameters=" + result.data + "</p><p>e.postData.contents="+result.postdata+"</p>"
      $("#result").html(s);
      debugger;
		},

		complete: function () {
			console.log('Finished all tasks');
		}
	});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="no">
<head>
    <meta charset="utf-8">
</head>

<body>
<input id="name" type="text" value="GÅGHØHRÆR" size="50"/>
<button id="send">Send</button>
<div id="result">

</div>
</body>
</html>

Upvotes: 2

Views: 796

Answers (1)

Erlend
Erlend

Reputation: 56

My final solution so far :) is to just use encodeURIComponent to encode the data data posted to the google script:

encodeURIComponent( data )

On the google script side, e.parameters will decode this correctly, at least for the norwegian characters æøå.

The code snippet at the bottom is updated with encodeURIcomponent, i.e. using the solution described above.

----

Before I came to the conclusion above, I went through the following, which I thought could be of use to others as well:

window.btoa(data) did not encode the norwegian characters "æøå" in a the correct way. I had to do

window.btoa(unescape(encodeURIComponent( data )))

as suggested here: https://www.sumitgupta.net/javascript-base64-encode-decode-for-utf-8unicode-string/

https://www.base64decode.org/ and https://www.base64encode.org/ helped me figure this out as window.btoa("æøå")="5vjl" whereas entering æøå in https://www.base64encode.org/ with UTF-8 encoding gives "w6bDuMOl".

On the google app script side, I had to have this code:

var decodedData = Utilities.base64Decode(e.parameter["name"]); var decodedDataAsString = Utilities.newBlob(decodedData).getDataAsString();

var actionScript = "https://script.google.com/macros/s/AKfycbwbYukbEejyL4yNlbW7xdfXPVZkZFJ7StxUIrKC/exec";

$(document).ready(function(){
    var sendButton = $("#send");
    if(sendButton != null)
    {
			sendButton.click(handleSend);
    }
});

function handleSend(event) { 
  var data = $("#name").val();
  var data2 =   encodeURIComponent( data );
  console.log(data2);
  var postData = "name="+data2;
  console.log(postData);

		request = $.ajax({
		url: actionScript,
		type: "post",
		data: postData,

		beforeSend: function () {
			console.log("Loading");
		},

		error: function (jqXHR, textStatus, errorThrown) {
			console.log(jqXHR);
			console.log(textStatus);
			console.log(errorThrown);
		},

		success: function (result) {
			console.log("success");
      var s = "<p>e.parameters['name']=" + result.data + "</p><p>e.postData.contents="+result.postdata+"</p>"
      $("#result").html(s);
		},

		complete: function () {
			console.log('Finished all tasks');
		}
	});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="no">
<head>
    <meta charset="utf-8">
</head>

<body>
<input id="name" type="text" value="GÅGHØHRÆR" size="50"/>
<button id="send">Send</button>
<div id="result">

</div>
</body>
</html>

Upvotes: 0

Related Questions