Skip to content

Instantly share code, notes, and snippets.

@dpawluk
Created January 31, 2017 21:43
Show Gist options
  • Select an option

  • Save dpawluk/c781d07849c685028931bcc4ea208436 to your computer and use it in GitHub Desktop.

Select an option

Save dpawluk/c781d07849c685028931bcc4ea208436 to your computer and use it in GitHub Desktop.
Read a JSON file and parse it or paste the text to a display area. ZAFv2
<html>
<head>
<meta charset="utf-8">
<!-- http://garden.zendesk.com -->
<link rel="stylesheet" href="https://assets.zendesk.com/apps/sdk-assets/css/0/zendesk_garden.css" type="text/css">
<style>
#display_box {
width:200px;
height: 100px;
}
</style>
</head>
<body>
<h2 class="u-gamma">Hello JSON!</h2>
<!-- https://github.com/zendesk/zendesk_app_framework_sdk -->
<!-- jquery from cdn -->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script type="text/javascript" src="https://assets.zendesk.com/apps/sdk/2.0/zaf_sdk.js"></script>
<script>
// Initialise the Zendesk JavaScript API client
// https://developer.zendesk.com/apps/docs/apps-v2
var client = ZAFClient.init();
client.invoke('resize', { width: '100%', height: '200px' });
client.on('app.registered', init);
function init(){
$("#text_file").on('change', readSomeFile);
}
function readSomeFile(event){
var file = event.currentTarget.files[0];
var reader = new FileReader();
console.log(reader);
reader.onload = function(evt) {
var result = evt.target.result;
$("#display_box").text(result);
var json_object = JSON.parse(result);
console.log(json_object);
};
reader.readAsText(file);
}
</script>
<textarea id="display_box">File Not Loaded</textarea>
<input id="text_file" type="file" />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment