Easy & Fast File Upload Component – react-upload-in

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:

 

Download Details:

Author:

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website:

License: