add filesize and modified date to file-to-array-buffer

hashicorp · Sep 27, 2019 · ecdc3d5 · ecdc3d5
1 parent 363bedf
commit ecdc3d5
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/ui/app/components/file-to-array-buffer.js b/ui/app/components/file-to-array-buffer.js
@@ -1,10 +1,13 @@
 import Component from '@ember/component';
+import filesize from 'filesize';
 
 export default Component.extend({
   classNames: ['box', 'is-fullwidth', 'is-marginless', 'is-shadowless'],
   onChange: () => {},
   file: null,
   fileName: null,
+  fileSize: null,
+  fileLastModified: null,
 
   /*
    * @public
@@ -24,7 +27,7 @@ export default Component.extend({
 
   readFile(file) {
     const reader = new FileReader();
-    reader.onload = () => this.send('onChange', reader.result, file.name);
+    reader.onload = () => this.send('onChange', reader.result, file);
     reader.readAsArrayBuffer(file);
   },
 
@@ -41,10 +44,14 @@ export default Component.extend({
     clearFile() {
       this.send('onChange');
     },
-    onChange(file, filename) {
-      this.set('file', file);
-      this.set('fileName', filename);
-      this.onChange(file, filename);
+    onChange(fileAsBytes, fileMeta) {
+      let { name, size, lastModifiedDate } = fileMeta || {};
+      let fileSize = size ? filesize(size) : null;
+      this.set('file', fileAsBytes);
+      this.set('fileName', name);
+      this.set('fileSize', fileSize);
+      this.set('fileLastModified', lastModifiedDate);
+      this.onChange(fileAsBytes, name);
     },
   },
 });
diff --git a/ui/app/templates/components/file-to-array-buffer.hbs b/ui/app/templates/components/file-to-array-buffer.hbs
@@ -18,7 +18,12 @@
       </label>
     </div>
   </div>
-  {{#if @fileName}}
+  {{#if this.fileName}}
+  <p class="help has-text-grey">
+    This file is {{this.fileSize}} and was created on {{date-format this.fileLastModified 'MMM DD, YYYY hh:mm:ss A'}}.
+  </p>
+  {{/if}}
+  {{#if @fileHelpText}}
   <p class="help has-text-grey">
     {{@fileHelpText}}
   </p>