forked from reactstrap/reactstrap
/
CustomFileInput.js
112 lines (92 loc) · 2.85 KB
/
CustomFileInput.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { mapToCssModules } from './utils';
const propTypes = {
className: PropTypes.string,
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
label: PropTypes.node,
valid: PropTypes.bool,
invalid: PropTypes.bool,
bsSize: PropTypes.string,
htmlFor: PropTypes.string,
cssModule: PropTypes.object,
onChange: PropTypes.func,
children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]),
innerRef: PropTypes.oneOfType([
PropTypes.object,
PropTypes.string,
PropTypes.func,
])
};
class CustomFileInput extends React.Component {
constructor(props) {
super(props);
this.state = {
files:null,
};
this.onChange = this.onChange.bind(this);
}
onChange(e) {
let input = e.target;
let {onChange} = this.props;
let files = this.getSelectedFiles(input);
if (typeof(onChange) === 'function') {
onChange(...arguments);
}
this.setState({files})
}
getSelectedFiles(input) {
let {multiple} = this.props;
if (multiple && input.files) {
let files = [].slice.call(input.files);
return files.map(file => file.name).join(', ');
}
if (input.value.indexOf('fakepath') !== -1) {
let parts = input.value.split('\\');
return parts[parts.length - 1];
}
return input.value;
}
render() {
const {
className,
label,
valid,
invalid,
cssModule,
children,
bsSize,
innerRef,
htmlFor,
type,
onChange,
...attributes
} = this.props;
const customClass = mapToCssModules(
classNames(
className,
`custom-file`,
bsSize ? `custom-file-${bsSize}` : false,
),
cssModule
);
const validationClassNames = mapToCssModules(
classNames(
invalid && 'is-invalid',
valid && 'is-valid',
),
cssModule
);
const labelHtmlFor = htmlFor || attributes.id;
const {files} = this.state;
return (
<div className={customClass}>
<input type="file" {...attributes} ref={innerRef} className={classNames(validationClassNames, mapToCssModules('custom-file-input', cssModule))} onChange={this.onChange}/>
<label className={mapToCssModules('custom-file-label', cssModule)} htmlFor={labelHtmlFor}>{files || label || 'Choose file'}</label>
</div>
);
}
}
CustomFileInput.propTypes = propTypes;
export default CustomFileInput;