Moving UI assets to OSS

ui/app/components/pgp-file.js

@@ -0,0 +1,74 @@
+import Ember from 'ember';
+
+const { set } = Ember;
+const BASE_64_REGEX = /^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/gi;
+
+export default Ember.Component.extend({
+  classNames: ['box', 'is-fullwidth', 'is-marginless', 'is-shadowless'],
+  key: null,
+  index: null,
+  onChange: () => {},
+
+  /*
+   * @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,
+
+  /*
+   * @public
+   * @param String
+   * Text to use as help under the textarea in text-input mode
+   * If null, a default will be rendered
+   */
+  textareaHelpText: null,
+
+  readFile(file) {
+    const reader = new FileReader();
+    reader.onload = () => this.setPGPKey(reader.result, file.name);
+    // this gives us a base64-encoded string which is important in the onload
+    reader.readAsDataURL(file);
+  },
+
+  setPGPKey(dataURL, filename) {
+    const b64File = dataURL.split(',')[1].trim();
+    const decoded = atob(b64File).trim();
+
+    // If a b64-encoded file was uploaded, then after decoding, it
+    // will still be b64.
+    // If after decoding it's not b64, we want
+    // the original as it was only encoded when we used `readAsDataURL`.
+    const fileData = decoded.match(BASE_64_REGEX) ? decoded : b64File;
+    this.get('onChange')(this.get('index'), { value: fileData, fileName: filename });
+  },
+
+  actions: {
+    pickedFile(e) {
+      const { files } = e.target;
+      if (!files.length) {
+        return;
+      }
+      for (let i = 0, len = files.length; i < len; i++) {
+        this.readFile(files[i]);
+      }
+    },
+    updateData(e) {
+      const key = this.get('key');
+      set(key, 'value', e.target.value);
+      this.get('onChange')(this.get('index'), this.get('key'));
+    },
+    clearKey() {
+      this.get('onChange')(this.get('index'), { value: '' });
+    },
+  },
+});