redux-imgur
v0.0.20
Published
Redux imgur uploader
Downloads
20
Maintainers
Readme
redux-imgur Redux imgur uploader
FEATURES
- Service architecture (redux-manager powered)
- Journaling (redux-journal powered)
- Persist state (PouchDB powered)
- Dynamic service configuration (state.config):
- docsMax = 2 - maximum docs in state.docs
- docsMaxOverRemove: true - remove old images over docsMax
Dependencies
npm i -S isomorphic-fetch
INSTALL
Stable
npm i -S redux-imgur
Unstable
npm i -S lokhmakov/redux-imgur
EXAMPLES
NODE-API
require('redux-journal').enable()
import { write, error } from 'redux-journal'
import { manager } from 'redux-manager'
import { imgurLocal } from 'redux-imgur'
const api = imgurLocal()
manager.enableLogger(require('redux-node-logger')())
manager.getStore()
const fileToBase64 = (fileName) => new Buffer(require('fs').readFileSync(fileName)).toString('base64')
const clientID = 'adcf840e0bf408c'
const imageBase64 = fileToBase64('test.jpg')
api.upload({ clientID, imageBase64 }).then((imageLink) => {
write(imageLink)
}).catch((e) => {
error(e)
})
PERSIST
require('redux-journal').enable()
import PouchDB from 'pouchdb'
const db = PouchDB('data', { db: require('memdown') })
import { manager } from 'redux-manager'
import { imgurActions } from 'redux-imgur'
import { imgurLocal } from 'redux-imgur'
import { imgurPersist } from 'redux-imgur'
imgurLocal()
imgurPersist({ db })
manager.enableLogger(require('redux-node-logger')())
manager.getStore()
const fileToBase64 = (fileName) => new Buffer(require('fs').readFileSync(fileName)).toString('base64')
const clientID = 'adcf840e0bf408c'
const imageBase64 = fileToBase64('test.jpg')
manager.dispatch(imgurActions.upload({ clientID, imageBase64 }), 'imgur')
REACT
client.js
require('redux-journal').enable()
import injectTapEventPlugin from 'react-tap-event-plugin'
injectTapEventPlugin()
import PouchDB from 'pouchdb'
import { manager } from 'redux-manager'
import { imgurLocal } from 'redux-imgur'
import { imgurPersist } from 'redux-imgur'
const service1 = 'imgur'
const service2 = 'imgur2'
const service3 = 'imgur3'
imgurLocal({ serviceName: service1 })
imgurPersist({ db: PouchDB('redux-imgur')})
imgurLocal({ serviceName: service2 })
imgurLocal({ serviceName: service3 })
manager.enableLogger(require('redux-logger')())
const store = manager.getStore()
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { connect } from 'react-redux'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import { ImgurPaper } from 'redux-imgur'
const ImgurPaper1 = connect(state => ({ imgur: state[service1] }))(ImgurPaper)
const muiTheme = getMuiTheme({ palette: { accent1Color: require('material-ui/styles/colors').deepOrange500 }})
const render = () => ReactDOM.render(
<Provider store={ store }>
<MuiThemeProvider muiTheme={ muiTheme }>
<div>
<ImgurPaper1 serviceName={ service1 } />
</div>
</MuiThemeProvider>
</Provider>,
document.getElementById('app')
)
render()