react-smartui-fileupload

React FileUpload Component

Asynchronous FileUpload Component for SmartUI Project

Special Thanks GA-MO

This Repository created by React Component Boilerplate

React Component boilerplate for creating new Reac Compoment and everything you need to get started.

https://github.com/GA-MO/react-component-npm-package-boilerplate/

Prerequisite

Please import font-awesome to your project

• https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Getting Started

$ npm install react-smartui-fileupload

Quick Usage

Copy following code to your react component

import FileUploadInput from 'react-smartui-fileupload'
import 'react-smartui-fileupload/css/style.css'
.
.
.
onUpload = (name, file) => {
  return new Promise((resolve, reject) => {
    // promise to upload file
    setTimeout(() => {
      resolve(true)
    }, 500)
  })
}

onDelete = (name, file) => {
  return new Promise((resolve, reject) => {
    // promise to delete file
    setTimeout(() => {
      resolve(true)
    }, 500)
  })
}

render() {
  return (
    <FileUploadInput
      name={'file'}
      label={'File'}
      fileName={''}
      onUpload={this.onUpload}
      onDelete={this.onDelete}
    />
  )
}

Error Handling

This component can handle error in case property onUpload or onDelete is rejected and it will grab error.message (new Error('Something error')) to show instead of 'กรุณาเลือกไฟล์'

onDelete = (name, file) => {
  return new Promise((resolve, ir) => {
    // promise to delete file
    setTimeout(() => {
      reject(new Error('Cannot upload file'))
    }, 500)
  })
}

Props

Property	Description	Type	Default
name	name of component for identify each component	String	'File'
label	UI text label of component	String	''
required	Flag to render * with red	Boolean	false
fileName	File's name	String	''
async	Flag to using asynchronous feature	Boolean	true
accept	Mime types of accept files	String	'*'
onDrop	Event handler after file is chosen	function(name, file)	null
onUpload	Event handler after file need to upload	function(name, file)	null
onDelete	Event handler after button delete is clicked	function(name, file)	null

If you have any suggestions, feel free to contact me [e-mail] Thank you !!