Skip to content

Commit ed01cb4

Browse files
kmiyauchikmiyauchi
authored
Merge pull request #85 from kmiyauchi/master
Update renderFileUpload
2 parents 8d6b968 + c3a35b0 commit ed01cb4

2 files changed

Lines changed: 66 additions & 93 deletions

File tree

‎lib/FormFields/renderFileUpload.js‎

Lines changed: 45 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -52,65 +52,58 @@ var renderFileUpload = function (_React$Component) {
5252

5353
_this.state = {
5454
file: false,
55-
filename: '',
5655
fileError: '',
5756
data: '',
5857
filetype: '',
5958
accept: generateAcceptText(props)
6059
};
60+
_this.getFileKey = _this.getFileKey.bind(_this);
6161
return _this;
6262
}
6363

6464
_createClass(renderFileUpload, [{
65-
key: 'componentWillMount',
66-
value: function componentWillMount() {
67-
var _props = this.props,
68-
file = _props.file,
69-
input = _props.input;
65+
key: 'getFileKey',
66+
value: function getFileKey(mime) {
67+
var mimeTypes = this.props.mimeTypes;
7068

71-
if (file) {
72-
this.setState({
73-
filename: file.filename,
74-
data: file.data,
75-
filetype: file.filetype
76-
});
77-
}
78-
input.onChange(file ? file.filename : '');
69+
var key = '';
70+
Object.keys(mimeTypes).forEach(function (k) {
71+
if (mimeTypes[k].includes(mime)) {
72+
key = k;
73+
}
74+
});
75+
return key ? 'file-' + key : '';
7976
}
8077
}, {
8178
key: 'render',
8279
value: function render() {
8380
var _this2 = this;
8481

85-
var _props2 = this.props,
86-
className = _props2.className,
87-
globalError = _props2.globalError,
88-
name = _props2.name,
89-
placeholder = _props2.placeholder,
90-
label = _props2.label,
91-
required = _props2.required,
92-
help = _props2.help,
93-
input = _props2.input,
94-
onUpload = _props2.onUpload,
95-
maxFileSize = _props2.maxFileSize,
96-
disabled = _props2.disabled,
97-
_props2$meta = _props2.meta,
98-
touched = _props2$meta.touched,
99-
error = _props2$meta.error,
100-
review = _props2.review,
101-
fileTypes = _props2.fileTypes,
102-
txtRemove = _props2.txtRemove,
103-
txtUpload = _props2.txtUpload,
104-
errorFileType = _props2.errorFileType,
105-
errorFileSize = _props2.errorFileSize,
106-
errorReject = _props2.errorReject;
82+
var _props = this.props,
83+
className = _props.className,
84+
globalError = _props.globalError,
85+
name = _props.name,
86+
placeholder = _props.placeholder,
87+
label = _props.label,
88+
required = _props.required,
89+
help = _props.help,
90+
input = _props.input,
91+
onUpload = _props.onUpload,
92+
maxFileSize = _props.maxFileSize,
93+
disabled = _props.disabled,
94+
_props$meta = _props.meta,
95+
touched = _props$meta.touched,
96+
error = _props$meta.error,
97+
review = _props.review,
98+
fileTypes = _props.fileTypes,
99+
txtRemove = _props.txtRemove,
100+
txtUpload = _props.txtUpload,
101+
errorFileType = _props.errorFileType,
102+
errorFileSize = _props.errorFileSize,
103+
errorReject = _props.errorReject;
107104
var _state = this.state,
108105
accept = _state.accept,
109-
fileError = _state.fileError,
110-
data = _state.data,
111-
filetype = _state.filetype,
112-
filename = _state.filename;
113-
106+
fileError = _state.fileError;
114107

115108
return _react2.default.createElement(
116109
'div',
@@ -139,15 +132,15 @@ var renderFileUpload = function (_React$Component) {
139132
_react2.default.createElement(
140133
'a',
141134
{
142-
className: 'btn btn-default ' + (review ? 'review-page' : '') + ' ' + (filetype === 'application/pdf' ? 'link-pdf' : 'link-doc'),
135+
className: 'btn btn-default ' + (review ? 'review-page' : '') + ' ' + this.getFileKey(input.value.filetype),
143136
type: 'button',
144-
href: data,
137+
href: input.value.path ? input.value.path : '',
145138
target: '_blank'
146139
},
147140
_react2.default.createElement(
148141
'span',
149142
null,
150-
filename
143+
input.value.filename
151144
)
152145
),
153146
input.value && !review && _react2.default.createElement(
@@ -182,21 +175,14 @@ var renderFileUpload = function (_React$Component) {
182175
onDrop: function onDrop(acceptedFiles, rejectedFiles) {
183176
if (acceptedFiles.length > 0) {
184177
_this2.setState({ fileError: '' });
185-
var _filename = acceptedFiles[0].name;
186-
_this2.setState({
187-
filename: _filename,
188-
data: acceptedFiles[0].preview,
189-
filetype: acceptedFiles[0].type
190-
});
191-
input.onChange(_filename);
192-
onUpload({
193-
name: input.name,
194-
file: {
195-
filename: _filename,
196-
data: acceptedFiles[0].preview,
197-
filetype: acceptedFiles[0].type
198-
}
199-
});
178+
var filename = acceptedFiles[0].name;
179+
var reader = new FileReader();
180+
reader.readAsDataURL(acceptedFiles[0]);
181+
reader.onloadend = function () {
182+
var value = { filename: filename, path: acceptedFiles[0].preview, data: reader.result, filetype: acceptedFiles[0].type };
183+
input.onChange(value);
184+
onUpload(value);
185+
};
200186
} else {
201187
input.onChange('');
202188
if (!accept.includes(rejectedFiles[0].type)) {

‎src/FormFields/renderFileUpload.jsx‎

Lines changed: 21 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -19,23 +19,22 @@ class renderFileUpload extends React.Component {
1919
super();
2020
this.state = {
2121
file: false,
22-
filename: '',
2322
fileError: '',
2423
data: '',
2524
filetype: '',
2625
accept: generateAcceptText(props),
2726
};
27+
this.getFileKey = this.getFileKey.bind(this);
2828
}
29-
componentWillMount() {
30-
const { file, input } = this.props;
31-
if (file) {
32-
this.setState({
33-
filename: file.filename,
34-
data: file.data,
35-
filetype: file.filetype,
36-
});
37-
}
38-
input.onChange(file ? file.filename : '');
29+
getFileKey(mime) {
30+
const { mimeTypes } = this.props;
31+
let key = '';
32+
Object.keys(mimeTypes).forEach((k) => {
33+
if (mimeTypes[k].includes(mime)) {
34+
key = k;
35+
}
36+
});
37+
return key ? `file-${key}` : '';
3938
}
4039
render() {
4140
const {
@@ -59,8 +58,7 @@ class renderFileUpload extends React.Component {
5958
errorFileSize,
6059
errorReject,
6160
} = this.props;
62-
const { accept, fileError, data, filetype, filename } = this.state;
63-
61+
const { accept, fileError } = this.state;
6462
return (
6563
<div
6664
className={classNames(
@@ -83,16 +81,12 @@ class renderFileUpload extends React.Component {
8381
{input.value && (
8482
<div className="btn-group">
8583
<a
86-
className={`btn btn-default ${review
87-
? 'review-page'
88-
: ''} ${filetype === 'application/pdf'
89-
? 'link-pdf'
90-
: 'link-doc'}`}
84+
className={`btn btn-default ${review ? 'review-page' : ''} ${this.getFileKey(input.value.filetype)}`}
9185
type="button"
92-
href={data}
86+
href={input.value.path ? input.value.path : ''}
9387
target="_blank"
9488
>
95-
<span>{filename}</span>
89+
<span>{input.value.filename}</span>
9690
</a>
9791
{input.value &&
9892
!review && (
@@ -127,20 +121,13 @@ class renderFileUpload extends React.Component {
127121
if (acceptedFiles.length > 0) {
128122
this.setState({ fileError: '' });
129123
const filename = acceptedFiles[0].name;
130-
this.setState({
131-
filename,
132-
data: acceptedFiles[0].preview,
133-
filetype: acceptedFiles[0].type,
134-
});
135-
input.onChange(filename);
136-
onUpload({
137-
name: input.name,
138-
file: {
139-
filename,
140-
data: acceptedFiles[0].preview,
141-
filetype: acceptedFiles[0].type,
142-
},
143-
});
124+
const reader = new FileReader();
125+
reader.readAsDataURL(acceptedFiles[0]);
126+
reader.onloadend = () => {
127+
const value = { filename, path: acceptedFiles[0].preview, data: reader.result, filetype: acceptedFiles[0].type };
128+
input.onChange(value);
129+
onUpload(value);
130+
};
144131
} else {
145132
input.onChange('');
146133
if (!accept.includes(rejectedFiles[0].type)) {

0 commit comments

Comments
 (0)