mirror of
https://github.com/optim-enterprises-bv/vault.git
synced 2025-10-30 10:12:35 +00:00
updates file-to-array-buffer component to glimmer and fixes flaky issue in test runs (#23081)
This commit is contained in:
Jordan Reimer
@@ -3,7 +3,9 @@
|
|||||||
* SPDX-License-Identifier: BUSL-1.1
|
* SPDX-License-Identifier: BUSL-1.1
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import Component from '@ember/component';
|
import Component from '@glimmer/component';
|
||||||
|
import { tracked } from '@glimmer/tracking';
|
||||||
|
import { action } from '@ember/object';
|
||||||
import filesize from 'filesize';
|
import filesize from 'filesize';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -15,54 +17,45 @@ import filesize from 'filesize';
|
|||||||
* ```js
|
* ```js
|
||||||
* <FileToArrayBuffer @onChange={{action (mut file)}} />
|
* <FileToArrayBuffer @onChange={{action (mut file)}} />
|
||||||
* ```
|
* ```
|
||||||
* @param onChange=null {Function} - The function to call when the file read is complete. This function
|
* @param {function} onChange - The function to call when the file read is complete. Receives the file as a JS ArrayBuffer
|
||||||
* receives the file as a JS ArrayBuffer
|
* @param {string} [label] - Text to use as the label for the file input
|
||||||
* @param [label=null {String}] - Text to use as the label for the file input
|
* @param {string} [fileHelpText] - Text to use as help under the file input
|
||||||
* @param [fileHelpText=null {String} - Text to use as help under the file input
|
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
export default Component.extend({
|
export default class FileToArrayBufferComponent extends Component {
|
||||||
classNames: ['box', 'is-fullwidth', 'is-marginless', 'is-shadowless'],
|
@tracked filename = null;
|
||||||
onChange: () => {},
|
@tracked fileSize = null;
|
||||||
label: null,
|
@tracked fileLastModified = null;
|
||||||
fileHelpText: null,
|
|
||||||
|
|
||||||
file: null,
|
|
||||||
filename: null,
|
|
||||||
fileSize: null,
|
|
||||||
fileLastModified: null,
|
|
||||||
|
|
||||||
readFile(file) {
|
readFile(file) {
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
// raft-snapshot-restore test was failing on CI trying to send action on destroyed object
|
reader.onload = () => {
|
||||||
// ensure that the component has not been torn down prior to sending onChange action
|
// raft-snapshot-restore test was failing on CI trying to invoke fileChange on destroyed object
|
||||||
if (!this.isDestroyed && !this.isDestroying) {
|
// ensure that the component has not been torn down
|
||||||
reader.onload = () => this.send('onChange', reader.result, file);
|
if (!this.isDestroyed && !this.isDestroying) {
|
||||||
}
|
this.fileChange(reader.result, file);
|
||||||
|
}
|
||||||
|
};
|
||||||
reader.readAsArrayBuffer(file);
|
reader.readAsArrayBuffer(file);
|
||||||
},
|
}
|
||||||
|
|
||||||
actions: {
|
@action
|
||||||
pickedFile(e) {
|
pickedFile(e) {
|
||||||
const { files } = e.target;
|
const { files } = e.target;
|
||||||
if (!files.length) {
|
if (!files.length) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
for (let i = 0, len = files.length; i < len; i++) {
|
for (let i = 0, len = files.length; i < len; i++) {
|
||||||
this.readFile(files[i]);
|
this.readFile(files[i]);
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
clearFile() {
|
|
||||||
this.send('onChange');
|
@action
|
||||||
},
|
fileChange(fileAsBytes, fileMeta) {
|
||||||
onChange(fileAsBytes, fileMeta) {
|
const { name, size, lastModifiedDate } = fileMeta || {};
|
||||||
const { name, size, lastModifiedDate } = fileMeta || {};
|
this.filename = name;
|
||||||
const fileSize = size ? filesize(size) : null;
|
this.fileSize = size ? filesize(size) : null;
|
||||||
this.set('file', fileAsBytes);
|
this.fileLastModified = lastModifiedDate;
|
||||||
this.set('filename', name);
|
this.args.onChange(fileAsBytes, name);
|
||||||
this.set('fileSize', fileSize);
|
}
|
||||||
this.set('fileLastModified', lastModifiedDate);
|
}
|
||||||
this.onChange(fileAsBytes, name);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|||||||
@@ -2,49 +2,48 @@
|
|||||||
Copyright (c) HashiCorp, Inc.
|
Copyright (c) HashiCorp, Inc.
|
||||||
SPDX-License-Identifier: BUSL-1.1
|
SPDX-License-Identifier: BUSL-1.1
|
||||||
~}}
|
~}}
|
||||||
|
<div class="box is-fullwidth is-marginless is-shadowless">
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<div class="control is-expanded">
|
<div class="control is-expanded">
|
||||||
<label class="is-label">
|
<label class="is-label">
|
||||||
{{#if this.label}}
|
{{@label}}
|
||||||
{{this.label}}
|
</label>
|
||||||
{{/if}}
|
<div class="file is-fullwidth">
|
||||||
</label>
|
<div class="file-label" aria-label="Choose a file">
|
||||||
<div class="file is-fullwidth">
|
<input id="file-input" class="file-input" type="file" {{on "change" this.pickedFile}} data-test-file-input />
|
||||||
<div class="file-label" aria-label="Choose a file">
|
<label for="file-input" class="file-cta button">
|
||||||
<input id="file-input" class="file-input" type="file" onchange={{action "pickedFile"}} data-test-file-input />
|
<Icon @name="upload" class="has-light-grey-text" />
|
||||||
<label for="file-input" class="file-cta button">
|
Choose a file…
|
||||||
<Icon @name="upload" class="has-light-grey-text" />
|
</label>
|
||||||
Choose a file…
|
<span class="file-name has-text-grey-dark" data-test-text-file-input-label={{true}}>
|
||||||
</label>
|
{{or this.filename "No file chosen"}}
|
||||||
<span class="file-name has-text-grey-dark" data-test-text-file-input-label={{true}}>
|
</span>
|
||||||
{{or this.filename "No file chosen"}}
|
{{#if this.filename}}
|
||||||
</span>
|
<button
|
||||||
{{#if this.filename}}
|
type="button"
|
||||||
<button
|
class="file-delete-button"
|
||||||
type="button"
|
aria-label="Clear file selection"
|
||||||
class="file-delete-button"
|
{{on "click" this.fileChange}}
|
||||||
aria-label="Clear file selection"
|
data-test-text-clear
|
||||||
{{action "clearFile"}}
|
>
|
||||||
data-test-text-clear
|
<Icon @name="x-circle" />
|
||||||
>
|
</button>
|
||||||
<Icon @name="x-circle" />
|
{{/if}}
|
||||||
</button>
|
</div>
|
||||||
{{/if}}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{{#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>
|
||||||
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
{{#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>
|
|
||||||
{{/if}}
|
|
||||||
</div>
|
</div>
|
||||||
Reference in New Issue
Block a user