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 index$2 = require('../../06-layout/03-flex/index.js');
var index$3 = require('../../06-layout/03-flex/02-flex-item/index.js');
var JobPerFile = require('../../../../icons/JobPerFile.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 = {
            files: []
        };
        /**
         * Triggers a click on the input.
         */
        this.handleClick = event => {
            this.fileInput.current.click();
        };
        /**
         * Handle change on the input field.
         */
        this.handleChange = event => {
            const fileItems = [...event.target.files];
            this.setState({
                files: fileItems.map(fileItem => {
                    return {
                        file: fileItem.type.substring(0, 5) === 'image'
                            ? URL.createObjectURL(fileItem)
                            : null,
                        filename: fileItem.name,
                        fileSize: fileItem.size,
                        type: fileItem.type
                    };
                })
            }, () => {
                if (this.props.multiple) {
                    this.props.onChange(fileItems);
                }
                else {
                    this.props.onChange(fileItems[0]);
                }
            });
        };
        // create a ref to store the textInput DOM element
        this.fileInput = React__default.createRef();
    }
    render() {
        const { label = 'File', placeholder = 'Choose file', id, error = false, required = false, multiple = false, buttonStyle = 'default', onClick } = this.props;
        return (React__default.createElement(index$1.FormItem, null,
            label && (React__default.createElement(index$1.FormLabel, { error: error, required: required, htmlFor: id }, label)),
            React__default.createElement("input", { hidden: true, ref: this.fileInput, onChange: this.handleChange, type: "file", id: id, name: id, onClick: onClick, multiple: multiple }),
            React__default.createElement(index.Button, { onClick: this.handleClick, "data-testid": "trigger", buttonStyle: buttonStyle, type: "button" }, placeholder),
            React__default.createElement(index$2.default, { flexWrap: "wrap", alignItems: "center" }, this.state.files.map((fileUploaded, index) => (React__default.createElement(index$3.default, { margin: 4, key: index },
                React__default.createElement(styles.FilePreviewWrapper, null,
                    React__default.createElement(styles.ImagePreviewWrapper, null, fileUploaded.file ? (React__default.createElement(styles.Preview, { src: fileUploaded.file })) : (React__default.createElement(JobPerFile.JobPerFileIcon, { title: "Attachment" }))),
                    React__default.createElement(styles.PreviewInfo, null,
                        React__default.createElement("div", null,
                            React__default.createElement(styles.ImagePreviewInfoLabel, null,
                                React__default.createElement(styles.PreviewIcon, { name: "weight", title: label })),
                            fileUploaded.fileSize,
                            " KB")))))))));
    }
}

exports.FileInput = FileInput;