56442f673d
* wip tests * Move text-file to addon * rename fileName to filename, initial cleanup of text-fil * rename args, rename test selector * fix eye-con, remove enterAsText from file object * add tests * move files back to original location * rename files via git for git diff * adjsut test * Revert "wip tests" This reverts commit 63716a1e647a0b01236d34322837456ef3e9db43. * fix policy form input * cleanup conditional * add bottom margin * add element id * change arg name * add text area input test * add upload test to policy form Co-authored-by: Chelsea Shaw <cshaw@hashicorp.com>
70 lines
2 KiB
JavaScript
70 lines
2 KiB
JavaScript
import Component from '@glimmer/component';
|
|
import { action } from '@ember/object';
|
|
import { tracked } from '@glimmer/tracking';
|
|
import { guidFor } from '@ember/object/internals';
|
|
/**
|
|
* @module TextFile
|
|
* `TextFile` components render a file upload input with the option to toggle a "Enter as text" button
|
|
* that changes the input into a textarea
|
|
*
|
|
* @example
|
|
* <TextFile
|
|
* @uploadOnly={{true}}
|
|
* @helpText="help text"
|
|
* @onChange={{this.handleChange}}
|
|
* @label="PEM Bundle"
|
|
* />
|
|
*
|
|
* @param {function} onChange - Callback function to call when the value of the input changes, returns an object in the shape of { value: fileContents, filename: 'some-file.txt' }
|
|
* @param {bool} [uploadOnly=false] - When true, renders a static file upload input and removes the option to toggle and input plain text
|
|
* @param {string} [helpText] - Text underneath label.
|
|
* @param {string} [label='File'] - Text to use as the label for the file input. If none, default of 'File' is rendered
|
|
*/
|
|
|
|
export default class TextFileComponent extends Component {
|
|
@tracked content = '';
|
|
@tracked filename = '';
|
|
@tracked uploadError = '';
|
|
@tracked showValue = false;
|
|
@tracked showTextArea = false;
|
|
elementId = guidFor(this);
|
|
|
|
async readFile(file) {
|
|
try {
|
|
this.content = await file.text();
|
|
this.filename = file.name;
|
|
this.handleChange();
|
|
} catch (error) {
|
|
this.clearFile();
|
|
this.uploadError = 'There was a problem uploading. Please try again.';
|
|
}
|
|
}
|
|
|
|
@action
|
|
handleFileUpload(e) {
|
|
e.preventDefault();
|
|
const { files } = e.target;
|
|
if (!files.length) return;
|
|
this.readFile(files[0]);
|
|
}
|
|
|
|
@action
|
|
handleTextInput(e) {
|
|
e.preventDefault();
|
|
this.content = e.target.value;
|
|
this.handleChange();
|
|
}
|
|
|
|
@action
|
|
clearFile() {
|
|
this.content = '';
|
|
this.filename = '';
|
|
this.handleChange();
|
|
}
|
|
|
|
handleChange() {
|
|
this.args.onChange({ value: this.content, filename: this.filename });
|
|
this.uploadError = '';
|
|
}
|
|
}
|