jobiqo-cl/lib/src/components/02-atoms/01-forms/07-file/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var index = require('../01-button/index.js');
var index$1 = require('../11-form-item/index.js');
var StackImage = require('../../../../icons/StackImage.js');
var styles = require('./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 React.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(index$1.FormItem, null,
            label && React__default.createElement(index$1.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(index.Button, { onClick: this.handleClick, "data-testid": "trigger", buttonStyle: buttonStyle, type: "button" }, placeholder),
            this.state.filename && (React__default.createElement(styles.ImagePreviewWrapper, null,
                this.state.file && React__default.createElement(styles.Preview, { src: this.state.file }),
                React__default.createElement(styles.PreviewInfo, null,
                    React__default.createElement("div", null,
                        React__default.createElement(styles.ImagePreviewInfoLabel, null,
                            React__default.createElement(styles.PreviewIcon, null,
                                React__default.createElement(StackImage.StackImageIcon, { title: label }))),
                        this.state.filename),
                    React__default.createElement("div", null,
                        React__default.createElement(styles.ImagePreviewInfoLabel, null,
                            React__default.createElement(styles.PreviewIcon, { name: "weight", title: label })),
                        this.state.fileSize,
                        " KB"))))));
    }
}

exports.FileInput = FileInput;