jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
69 lines (66 loc) • 3.22 kB
JavaScript
import React__default, { Component } from 'react';
import { Button } from '../01-button/index.js';
import { FormItem, FormLabel } from '../11-form-item/index.js';
import { StackImageIcon } from '../../../../icons/StackImage.js';
import { ImagePreviewWrapper, Preview, PreviewInfo, ImagePreviewInfoLabel, PreviewIcon } from './styles.js';
/**
* @file index.tsx
*
* @fileoverview File input component. Renders a button input together with its label.
*/
/**
* A file input is a form element where users can chose a file from their local
* computer and use it to upload.
*/
class FileInput extends Component {
constructor(props) {
super(props);
this.state = {
file: null,
filename: null,
fileSize: null
};
/**
* Triggers a click on the input.
*/
this.handleClick = event => {
this.fileInput.current.click();
};
/**
* Handle change on the input field.
*/
this.handleChange = event => {
const file = event.target.files[0];
this.setState({
file: event.target.files[0].type.substring(0, 5) === 'image'
? URL.createObjectURL(event.target.files[0])
: null,
filename: event.target.files[0].name,
fileSize: event.target.files[0].size
}, () => this.props.onChange(file));
};
// create a ref to store the textInput DOM element
this.fileInput = React__default.createRef();
}
render() {
const { label = 'File', placeholder = 'Choose file', id, buttonStyle = 'default', onClick } = this.props;
return (React__default.createElement(FormItem, null,
label && React__default.createElement(FormLabel, { htmlFor: id }, label),
React__default.createElement("input", { hidden: true, ref: this.fileInput, onChange: this.handleChange, type: "file", id: id, name: id, onClick: onClick }),
React__default.createElement(Button, { onClick: this.handleClick, "data-testid": "trigger", buttonStyle: buttonStyle, type: "button" }, placeholder),
this.state.filename && (React__default.createElement(ImagePreviewWrapper, null,
this.state.file && React__default.createElement(Preview, { src: this.state.file }),
React__default.createElement(PreviewInfo, null,
React__default.createElement("div", null,
React__default.createElement(ImagePreviewInfoLabel, null,
React__default.createElement(PreviewIcon, null,
React__default.createElement(StackImageIcon, { title: label }))),
this.state.filename),
React__default.createElement("div", null,
React__default.createElement(ImagePreviewInfoLabel, null,
React__default.createElement(PreviewIcon, { name: "weight", title: label })),
this.state.fileSize,
" KB"))))));
}
}
export { FileInput };