Description:
An easy & fast upload for React that supports multi-file upload and custom themes.
How to use it:
1. Install and import the file upload component.
# NPM $ npm i react-upload-in import React from 'react'; import Uploader from 'react-upload-in';
2. This is a full example showing how to integrate the file upload into your app.
class App extends React.Component {
state={images:[
{id:1,name:'1.jpg', src:'http://localhost/ok/1.jpg'},
{id:2,name:'2.jpg', src:'http://localhost/ok/2.jpg'},
]}
constructor(props){
super(props)
this.uploader = React.createRef()
}
resultUpload(response){
const {images}=this.state
images.push({id: response.id, src:'http://localhost/ok/'+response.file, name: response.file})
this.setState({images})
}
onRemoved(file){
let{images}=this.state
images = images.filter(x => x.src !== file.src)
this.setState({images})
}
render(){
const {images}=this.state
return (<div className='p-32'>
<Uploader ref = {this.uploader}
src={images}
theme="sky"
label="Upload max 5 photos"
buttonText={"Upload"}
action={"http://localhost/ok/upload.php"}
setHeader={{key:'Authorization',value:'yourtoken'}}
filetypes={["png","jpg","pdf"]}
image={false}
onResult={this.resultUpload.bind(this)}
onRemoved={this.onRemoved.bind(this)}
hideOnSuccess={true}/>
</div>);
}
}
export default App;Preview:
