├── .gitignore ├── .babelrc ├── index.html ├── src ├── sass │ └── main.sass ├── style │ └── app.css └── js │ └── components │ ├── app.js │ └── react-file-base64.js ├── webpack.config.dev.js ├── webpack.config.js ├── LICENSE ├── package.json └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | npm-debug.log 3 | yarn.lock 4 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "react"], 3 | "only": [ 4 | "src/**/*.js" 5 | ], 6 | "plugins": [ 7 | "transform-object-assign" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React File To Base64 Converter 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/sass/main.sass: -------------------------------------------------------------------------------- 1 | 2 | h1 3 | margin-top: 75px 4 | margin-bottom: 35px 5 | 6 | .mt-25 7 | margin-top: 35px 8 | 9 | .text-center 10 | text-align: center 11 | 12 | img 13 | max-width: 450px 14 | margin: 15px 15 | 16 | input 17 | text-align: center 18 | margin-bottom: 35px 19 | 20 | .pre-container 21 | width: 750px 22 | margin: 15px auto 75px 23 | overflow: auto 24 | background: #f9f9f9 25 | padding: 5px 15px 26 | -------------------------------------------------------------------------------- /src/style/app.css: -------------------------------------------------------------------------------- 1 | 2 | h1 { 3 | margin-top: 75px; 4 | margin-bottom: 35px; 5 | } 6 | 7 | .mt-25 { 8 | margin-top: 35px; 9 | } 10 | 11 | .text-center { 12 | text-align: center; 13 | } 14 | 15 | img { 16 | max-width: 450px; 17 | margin: 15px; 18 | } 19 | 20 | input { 21 | text-align: center; 22 | margin-bottom: 35px; 23 | } 24 | 25 | .pre-container { 26 | width: 750px; 27 | margin: 15px auto 75px; 28 | overflow: auto; 29 | background: #f9f9f9; 30 | padding: 5px 15px; 31 | } 32 | -------------------------------------------------------------------------------- /webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | 2 | var webpack = require('webpack'); 3 | require('es6-promise').polyfill(); 4 | 5 | module.exports = { 6 | 7 | entry: './src/js/components/app.js', 8 | 9 | output: { 10 | path: './public', 11 | filename: 'app.js' 12 | }, 13 | 14 | module: { 15 | loaders: [ 16 | { 17 | test: /\.js$/, 18 | loader: 'babel-loader' 19 | }, 20 | { 21 | test: /\.css$/, 22 | loaders: ['style','css'] 23 | } 24 | ] 25 | } 26 | }; 27 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | 2 | var webpack = require('webpack'); 3 | const minify = process.argv.indexOf('--minify') !== -1; 4 | 5 | module.exports = { 6 | 7 | entry: './src/js/components/react-file-base64.js', 8 | 9 | output: { 10 | path: './build', 11 | filename: minify ? 'build.min.js' : 'build.js', 12 | libraryTarget: 'umd' 13 | }, 14 | module: { 15 | loaders: [ 16 | { 17 | test: /\.js$/, 18 | exclude: /node_modules/, 19 | loader: 'babel-loader', 20 | query: { 21 | presets: ['react', 'es2015'], 22 | }, 23 | }, 24 | { 25 | test: /\.css$/, 26 | loaders: ['style','css'] 27 | } 28 | ] 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Naufal Rabbani 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. 22 | -------------------------------------------------------------------------------- /src/js/components/app.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom'; 4 | 5 | import FileBase64 from './react-file-base64.js'; 6 | 7 | class App extends React.Component { 8 | 9 | constructor() { 10 | super() 11 | this.state = { 12 | files: [] 13 | } 14 | } 15 | 16 | getFiles(files){ 17 | this.setState({ files: files }) 18 | } 19 | 20 | render() { 21 | 22 | return ( 23 |
24 | 25 |

React File to Base64 Converter

26 | 27 |
28 |

*) Try To Upload Some Image~

29 | 32 |
33 | 34 |
35 | { this.state.files.map((file,i) => { 36 | return 37 | }) } 38 | 39 |
40 | 41 | { this.state.files.length != 0 ? 42 |
43 |

Callback Object

44 |
45 | 
{ JSON.stringify(this.state.files, null, 2) }
46 |
47 |
48 | : null } 49 | 50 |
51 | ) 52 | 53 | } 54 | 55 | } 56 | 57 | 58 | ReactDOM.render(, document.getElementById("app")) 59 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-file-base64", 3 | "version": "1.0.3", 4 | "description": "React Component for Converting File to base64", 5 | "main": "build/build.min.js", 6 | "scripts": { 7 | "dev": "webpack --config webpack.config.dev.js && webpack-dev-server --inline --hot", 8 | "build": "webpack && webpack -p --minify", 9 | "prepublish": "npm run build" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/BosNaufal/react-file-base64" 14 | }, 15 | "keywords": [ 16 | "react", 17 | "component", 18 | "react js", 19 | "upload", 20 | "image", 21 | "base64", 22 | "upload", 23 | "input file", 24 | "file reader" 25 | ], 26 | "author": "Naufal Rabbani ", 27 | "contributors": [ 28 | "Luis Rojas " 29 | ], 30 | "license": "MIT", 31 | "bugs": { 32 | "url": "https://github.com/BosNaufal/react-file-base64/issues" 33 | }, 34 | "homepage": "https://github.com/BosNaufal/react-file-base64#readme", 35 | "devDependencies": { 36 | "babel-core": "^6.24.1", 37 | "babel-loader": "^6.4.1", 38 | "babel-plugin-transform-object-assign": "^6.22.0", 39 | "babel-preset-es2015": "^6.6.0", 40 | "babel-preset-react": "^6.5.0", 41 | "css-loader": "^0.23.1", 42 | "es6-promise": "^3.1.2", 43 | "react-dom": "^15.5.4", 44 | "style-loader": "^0.13.1", 45 | "webpack": "^1.13.0", 46 | "webpack-dev-server": "^1.14.1" 47 | }, 48 | "peerDependencies": { 49 | "react": "^15.0.2" 50 | }, 51 | "dependencies": { 52 | "react": "^15.6.1" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React File Base64 2 | [React](http://facebook.github.io/react) Component for Converting Files to base64. It's based on [Dev Mozilla Website](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL) 3 | 4 | [DEMO](https://rawgit.com/BosNaufal/react-file-base64/master/index.html) 5 | 6 | 7 | ## Install 8 | You can import [react-file-base64.js](./src/js/components/react-file-base64.js) to your react component file like [this](./src/js/components/app.js) and process it with your preprocessor. 9 | 10 | You can install it via NPM 11 | ```bash 12 | npm install react-file-base64 13 | ``` 14 | 15 | 16 | ## Usage 17 | ```javascript 18 | 19 | import React from 'react'; 20 | import ReactDOM from 'react-dom'; 21 | 22 | import FileBase64 from 'react-file-base64'; 23 | 24 | class App extends React.Component { 25 | 26 | constructor() { 27 | super() 28 | this.state = { 29 | files: [] 30 | } 31 | } 32 | 33 | // Callback~ 34 | getFiles(files){ 35 | this.setState({ files: files }) 36 | } 37 | 38 | render() { 39 | return ( 40 | 43 | ) 44 | } 45 | 46 | } 47 | 48 | 49 | ReactDOM.render(, document.getElementById("app")) 50 | 51 | ``` 52 | 53 | ## Props 54 | ##### multiple (Boolean) 55 | Does your component support multiple files? 56 | 57 | ##### onDone (Function) 58 | Callback function when all files have been processed 59 | 60 | 61 | ## Thank You for Making this useful~ 62 | 63 | ## Let's talk about some projects with me 64 | Just Contact Me At: 65 | - Email: [bosnaufalemail@gmail.com](mailto:bosnaufalemail@gmail.com) 66 | - Skype Id: bosnaufal254 67 | - twitter: [@BosNaufal](https://twitter.com/BosNaufal) 68 | 69 | ## License 70 | [MIT](http://opensource.org/licenses/MIT) 71 | Copyright (c) 2016 - forever Naufal Rabbani 72 | -------------------------------------------------------------------------------- /src/js/components/react-file-base64.js: -------------------------------------------------------------------------------- 1 | /*! Copyright (c) 2016 Naufal Rabbani (http://github.com/BosNaufal) 2 | * Licensed Under MIT (http://opensource.org/licenses/MIT) 3 | * 4 | * React File Base64 - Version@1.0.0 5 | * 6 | */ 7 | 8 | import React from 'react'; 9 | 10 | export default class FileBase64 extends React.Component { 11 | 12 | constructor(props) { 13 | super(props); 14 | this.state = { 15 | files: [], 16 | }; 17 | } 18 | 19 | handleChange(e) { 20 | 21 | // get the files 22 | let files = e.target.files; 23 | 24 | // Process each file 25 | var allFiles = []; 26 | for (var i = 0; i < files.length; i++) { 27 | 28 | let file = files[i]; 29 | 30 | // Make new FileReader 31 | let reader = new FileReader(); 32 | 33 | // Convert the file to base64 text 34 | reader.readAsDataURL(file); 35 | 36 | // on reader load somthing... 37 | reader.onload = () => { 38 | 39 | // Make a fileInfo Object 40 | let fileInfo = { 41 | name: file.name, 42 | type: file.type, 43 | size: Math.round(file.size / 1000) + ' kB', 44 | base64: reader.result, 45 | file: file, 46 | }; 47 | 48 | // Push it to the state 49 | allFiles.push(fileInfo); 50 | 51 | // If all files have been proceed 52 | if(allFiles.length == files.length){ 53 | // Apply Callback function 54 | if(this.props.multiple) this.props.onDone(allFiles); 55 | else this.props.onDone(allFiles[0]); 56 | } 57 | 58 | } // reader.onload 59 | 60 | } // for 61 | 62 | } 63 | 64 | render() { 65 | return ( 66 | 70 | ); 71 | } 72 | } 73 | 74 | FileBase64.defaultProps = { 75 | multiple: false, 76 | }; 77 | --------------------------------------------------------------------------------