blob: 23c523bc6f8e65c278d9e43b71a85cdc0660a875 [file] [log] [blame]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Copyright (c) 2012 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
<title>File Histogram</title>
<script type="text/javascript">
FileHistogramModule = null; // Global application object.
statusText = 'NO-STATUS';
// Indicate load success.
function moduleDidLoad() {
FileHistogramModule = document.getElementById('file_histogram');
// If the page loads before the Native Client module loads, then set the
// status message indicating that the module is still loading. Otherwise,
// do not change the status message.
function pageDidLoad() {
if (FileHistogramModule == null) {
} else {
// It's possible that the Native Client module onload event fired
// before the page's onload event. In this case, the status message
// will reflect 'SUCCESS', but won't be displayed. This call will
// display the current message.
// Set the global status message. If the element with id 'statusField'
// exists, then set its HTML to the status message as well.
// opt_message The message test. If this is null or undefined, then
// attempt to set the element with id 'statusField' to the value of
// |statusText|.
function updateStatus(opt_message) {
if (opt_message)
statusText = opt_message;
var statusField = document.getElementById('status_field');
if (statusField) {
statusField.innerHTML = statusText;
function postFileContents(file) {
var reader = new FileReader();
reader.onload = function(load_event) {
if (FileHistogramModule)
// Handle a file being dropped on to the plugin's rectangle.
function handleFileDrop(dropEvent) {
if (!dropEvent.dataTransfer || !dropEvent.dataTransfer.files)
var files = dropEvent.dataTransfer.files;
for(var i = 0; i < files.length; ++i)
// Handle a file being chosen from the <input type=file...> tag.
function handleFileInput() {
var file_input = document.getElementById("FileInput");
var files = file_input.files;
for(var i = 0; i < files.length; ++i)
<body onload="pageDidLoad()">
<h1>File Histogram example</h1>
This example demonstrates the use of VarArrayBuffer, as well as a way to allow
the user to provide one or more files to your Native Client application.
Select one or more files by clicking "Choose Files", or Drag and drop one or
more files on to the square below. The embedded NaCl instance will read each
file in order and display a histogram representing its contents.
<!-- Load the published .nexe. This includes the 'nacl' attribute which
shows how to load multi-architecture modules. Each entry in the "nexes"
object in the .nmf manifest file is a key-value pair: the key is the
instruction set architecture ('x86-32', 'x86-64', etc.); the value is a URL
for the desired NaCl module.
To load the debug versions of your .nexes, set the 'nacl' attribute to the
_dbg.nmf version of the manifest file.
Note: The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
and a 'drop' event listener attached. This wrapping method is used instead of
attaching the event listeners directly to the <EMBED> element to ensure that
the listeners are active before the NaCl module 'load' event fires.
<div id="listener">
<script type="text/javascript">
var listener = document.getElementById('listener');
listener.addEventListener('load', moduleDidLoad, true);
// The "drop" event fires when the user drops something (such as a file)
// on to the target element (in this case, listener).
listener.addEventListener('drop', handleFileDrop, true);
<embed name="nacl_module"
width=256 height=256
type="application/x-nacl" />
<form name="FileInput"
<input type="file"
<div id="status_field">NO-STATUS</div>