I encountered problem with react component. Basically, i use NPM integrated with Rails and called React component in my rails app.
I try to call react-file-base64 module in my code like below :
const FileBase64 = require('react-file-base64');
var MembersNew = React.createClass(
{
render()
{
return(
<div>
<h5>ACCOUNT DETAILS</h5>
<hr/>
<p>Fill in your member account details below</p>
<b>Membership ID : </b>
<div className="row">
<div className="medium-6 columns">
<FileBase64/> <------ Called component
<label>Username*
<input ref="name" type="text"/>
</label>
<label>First Name*
<input ref="name" type="text"/>
</label>
<label>Last Name*
<input ref="name" type="text"/>
</label>
<label>Email Address*
<input ref="name" type="text"/>
</label>
</div>
</div>
)
Below is react-file-base64.js :
module.exports.React = require('react');
import ReactDOM from 'react-dom';
class FileBase64 extends React.Component {
constructor() {
super()
this.state = {
files: []
}
this.props = {
multiple: false
}
}
handleChange(e){
// get the files
let files = e.target.files;
// Process each file
var allFiles = []
for (var i = 0; i < files.length; i++) {
let file = files[i]
// Make new FileReader
let reader = new FileReader()
// Convert the file to base64 text
reader.readAsDataURL(file)
// on reader load somthing...
reader.onload = () => {
// Make a fileInfo Object
let fileInfo = {
name: file.name,
type: file.type,
size: Math.round(file.size / 1000)+' kB',
base64: reader.result,
file: file
}
// Push it to the state
allFiles.push(fileInfo)
// If all files have been proceed
if(allFiles.length == files.length){
// Apply Callback function
if(this.props.multiple) this.props.onDone(allFiles)
else this.props.onDone(allFiles[0])
}
} // reader.onload
} // for
}
render(){
return (
<div>
<input
type="file"
onChange={ this.handleChange.bind(this) }
multiple={ this.props.multiple } />
</div>
)
}
}
export default FileBase64;
I think what i did was wrong. If there's anyone could guide me on how can i achieve this. I really appreciate that.
via Aizuddin Badry
No comments:
Post a Comment