├── LICENSE
├── README.md
├── package.json
└── src
    └── fileInput.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 basecss <i@basecss.net>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # fileInput
 2 | 
 3 | Image upload and preview, based React.js
 4 | 
 5 | ### example
 6 | 
 7 | ```javascript
 8 | var React = require('react')
 9 | var ReactDOM = require('react-dom')
10 | 
11 | // import component
12 | var FileInput = require('./src/fileInput')
13 | 
14 | var App = React.createClass({
15 |   getInitialState: function () {
16 |     return {
17 |       files: []
18 |     }
19 |   },
20 |   onChange: function (files) {
21 |     this.setState({
22 |       files: this.state.files.concat(files)
23 |     })
24 |   },
25 |   render: function () {
26 |     return (
27 |       <div>
28 |         <FileInput onChange={this.onChange} multiple={false} />
29 |         {this.state.files.length ?
30 |         <div className="thumb-box">
31 |           { /* using files */ }
32 |         </div> : null}
33 |       </div>
34 |     )
35 |   }
36 | })
37 | 
38 | ReactDOM.render(
39 |   <App />,
40 |   document.querySelector(mountNode)
41 | )
42 | ```
43 | 
44 | - [Online Demo](http://www.basecss.net/fileInput/)
45 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "fileInput",
 3 |   "version": "0.0.1",
 4 |   "description": "Image upload and preview, based React.js",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/basecss/fileInput.git"
12 |   },
13 |   "keywords": [],
14 |   "author": "basecss",
15 |   "license": "MIT",
16 |   "bugs": {
17 |     "url": "https://github.com/basecss/fileInput/issues"
18 |   },
19 |   "homepage": "https://github.com/basecss/fileInput#readme",
20 |   "dependencies": {
21 |     "react": "^0.14.3",
22 |     "react-dom": "^0.14.3"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/fileInput.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | var React = require('react')
 4 | 
 5 | module.exports = React.createClass({
 6 |   
 7 |   getDefaultProps: function () {
 8 |     return {
 9 |       multiple: true,
10 |       btnValue: 'Upload Image',
11 |       className: 'upload-button'
12 |     }
13 |   },
14 |   
15 |   propTypes: {
16 |     onChange: React.PropTypes.func.isRequired,
17 |     multiple: React.PropTypes.bool,
18 |     btnValue: React.PropTypes.string
19 |   },
20 |   
21 |   _onChange: function (event) {
22 |     event.preventDefault()
23 |     
24 |     var target = event.target
25 |     var files = target.files
26 |     var count = this.props.multiple ? files.length : 1
27 |     var i
28 |     
29 |     for (i = 0; i < count; i++) {
30 |       files[i].thumb = URL.createObjectURL(files[i])
31 |     }
32 |     // convert to array.
33 |     files = Array.prototype.slice.call(files, 0)
34 |     // image filter.
35 |     // if want to support more file type, you can modify or remove this snippet.
36 |     files = files.filter(function (file) {
37 |       return /image/i.test(file.type)
38 |     })
39 |     
40 |     this.props.onChange(files, event)
41 |   },
42 |   
43 |   render: function () {
44 |     var className = this.props.className
45 |     return (
46 |       <a href="javascript:;" className={className}>
47 |         <input type="file" multiple={this.props.multiple} ref="fileInput" onChange={this._onChange} />
48 |         <span>{this.props.btnValue}</span>
49 |       </a>
50 |     )
51 |   }
52 |   
53 | })
54 | 


--------------------------------------------------------------------------------