diff --git a/ui/app/components/file-to-array-buffer.js b/ui/app/components/file-to-array-buffer.js
index 4eb31ef888ef..a5760e91065f 100644
--- a/ui/app/components/file-to-array-buffer.js
+++ b/ui/app/components/file-to-array-buffer.js
@@ -1,30 +1,32 @@
import Component from '@ember/component';
import filesize from 'filesize';
+/**
+ * @module FileToArrayBuffer
+ * `FileToArrayBuffer` is a component that will allow you to pick a file from the local file system. Once
+ * loaded, this file will be emitted as a JS ArrayBuffer to the passed `onChange` callback.
+ *
+ * @example
+ * ```js
+ *
+ * ```
+ * @param onChange=null {Function} - The function to call when the file read is complete. This function
+ * recieves the file as a JS ArrayBuffer
+ * @param [label=null {String}] - Text to use as the label for the file input If null, a default will be rendered
+ * @param [type=null {String} - Text to use as help under the file input
+ *
+ */
export default Component.extend({
classNames: ['box', 'is-fullwidth', 'is-marginless', 'is-shadowless'],
onChange: () => {},
+ label: null,
+ fileHelpText: null,
+
file: null,
fileName: null,
fileSize: null,
fileLastModified: null,
- /*
- * @public
- * @param String
- * Text to use as the label for the file input
- * If null, a default will be rendered
- */
- label: null,
-
- /*
- * @public
- * @param String
- * Text to use as help under the file input
- * If null, a default will be rendered
- */
- fileHelpText: null,
-
readFile(file) {
const reader = new FileReader();
reader.onload = () => this.send('onChange', reader.result, file);
diff --git a/ui/stories/file-to-array-buffer.md b/ui/stories/file-to-array-buffer.md
new file mode 100644
index 000000000000..2622a3d6e701
--- /dev/null
+++ b/ui/stories/file-to-array-buffer.md
@@ -0,0 +1,26 @@
+
+
+## FileToArrayBuffer
+`FileToArrayBuffer` is a component that will allow you to pick a file from the local file system. Once
+loaded, this file will be emitted as a JS ArrayBuffer to the passed `onChange` callback.
+
+**Params**
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| onChange | function
|
| The function to call when the file read is complete. This function recieves the file as a JS ArrayBuffer |
+| [label] | String
|
| Text to use as the label for the file input If null, a default will be rendered |
+| type | String
|
| Text to use as help under the file input |
+
+**Example**
+
+```js
+
+```
+
+**See**
+
+- [Uses of FileToArrayBuffer](https://github.com/hashicorp/vault/search?l=Handlebars&q=FileToArrayBuffer+OR+file-to-array-buffer)
+- [FileToArrayBuffer Source Code](https://github.com/hashicorp/vault/blob/master/ui/app/components/file-to-array-buffer.js)
+
+---
diff --git a/ui/stories/file-to-array-buffer.stories.js b/ui/stories/file-to-array-buffer.stories.js
new file mode 100644
index 000000000000..5c5afc64a878
--- /dev/null
+++ b/ui/stories/file-to-array-buffer.stories.js
@@ -0,0 +1,24 @@
+
+import hbs from 'htmlbars-inline-precompile';
+import { storiesOf } from '@storybook/ember';
+import notes from './file-to-array-buffer.md';
+
+
+storiesOf('FileToArrayBuffer/', module)
+ .addParameters({ options: { showPanel: true } })
+ .add(`FileToArrayBuffer`, () => ({
+ template: hbs`
+
File To Array Buffer
+
+ {{#if this.fileName}}
+ {{this.fileName}} as bytes: {{this.fileBytes}}
+ {{/if}}
+ `,
+ context: {
+ onChange(file, name) {
+ console.log(`${name} contents as an ArrayBuffer:`, file);
+ },
+ },
+ }),
+ {notes}
+);