Refactor FileUpload, abstract out some logic
parent
27dc997d70
commit
25d51ef4eb
@ -1,45 +1,44 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
const React = require('react');
|
|
||||||
const create = require('create-react-class');
|
|
||||||
|
|
||||||
let fileUpload = create({
|
const Promise = require("bluebird");
|
||||||
displayName: "FileUpload",
|
const React = require('react');
|
||||||
|
|
||||||
setFileRef: function(e) {
|
const withElement = require("../lib/with-element");
|
||||||
if (e != null) {
|
const fileToDataUrl = require("../lib/file-to-data-url");
|
||||||
e.addEventListener('change', this.startUpload);
|
|
||||||
this.setState({
|
|
||||||
fileRef: e
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
startUpload: function(e) {
|
module.exports = function FileUpload({ addUpload }) {
|
||||||
Array.from(e.target.files).forEach((file) => {
|
function handleChange(event) {
|
||||||
|
return Promise.map(Array.from(event.target.files), (file) => {
|
||||||
if (file.type.startsWith("image/")) {
|
if (file.type.startsWith("image/")) {
|
||||||
let reader = new FileReader();
|
return Promise.try(() => {
|
||||||
reader.onloadend = () => {
|
return fileToDataUrl(file);
|
||||||
let fileObject = {
|
}).then((url) => {
|
||||||
|
return addUpload({
|
||||||
file: file,
|
file: file,
|
||||||
preview: reader.result
|
preview: url
|
||||||
};
|
});
|
||||||
this.props.addUpload(fileObject);
|
});
|
||||||
};
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
} else {
|
} else {
|
||||||
this.props.addUpload({file: file, preview: "/icons/file.svg"});
|
return addUpload({
|
||||||
|
file: file,
|
||||||
|
preview: "/icons/file.svg"
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
|
||||||
|
|
||||||
render: function() {
|
|
||||||
return (
|
|
||||||
<div className="fileUpload">
|
|
||||||
<input type="file" id="fileUpload" multiple ref={this.setFileRef} />
|
|
||||||
<label htmlFor="fileUpload"><img src="/icons/file.svg"/></label>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
module.exports = fileUpload;
|
let setFileRef = withElement((element) => {
|
||||||
|
element.addEventListener("change", handleChange);
|
||||||
|
|
||||||
|
return function() {
|
||||||
|
element.removeEventListener("change", handleChange);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fileUpload">
|
||||||
|
<input type="file" id="fileUpload" multiple ref={setFileRef} />
|
||||||
|
<label htmlFor="fileUpload"><img src="/icons/file.svg"/></label>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
@ -0,0 +1,19 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
const Promise = require("bluebird");
|
||||||
|
|
||||||
|
module.exports = function readFileAsDataUrl(dataUrl) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const reader = new FileReader();
|
||||||
|
|
||||||
|
reader.onload = function(event) {
|
||||||
|
resolve(event.target.result);
|
||||||
|
};
|
||||||
|
|
||||||
|
reader.onerror = function(error) {
|
||||||
|
reject(error);
|
||||||
|
};
|
||||||
|
|
||||||
|
reader.readAsDataURL(dataUrl);
|
||||||
|
});
|
||||||
|
};
|
@ -0,0 +1,15 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
const React = require("react");
|
||||||
|
|
||||||
|
module.exports = function withElement(callback) {
|
||||||
|
let [ elementRef, setElementRef ] = React.useState();
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (elementRef != null) {
|
||||||
|
callback(elementRef);
|
||||||
|
}
|
||||||
|
}, [ elementRef ]);
|
||||||
|
|
||||||
|
return setElementRef;
|
||||||
|
};
|
Loading…
Reference in New Issue