@achievewithoutborders/file-upload-client

React File Upload Dialog

Installing

$ npm install @achievewithoutborders/file-upload-client --save

Props

|Prop name|Description|Default value|Example values| |----|----|----|----| |name|Name of field||doctor_name |text|Value that will be display on screen||Doctor's Name |onChange|Event that will be called when adding/removing item|() => {}|function(files) { handleOnChange({ index, files })} |accepts|Array of allowed file types|All|['image/*'] Documentation

Example

import React from 'react'
import FileUpload from '@achievewithoutborders/file-upload-client'

export default function FileUploadPage (props) {
  const [items, setItems] = React.useState([
    { 
      name: 'doctors_resume', 
      text: `Doctor's Resume`, 
      accepts: ['image/*'] 
    },
    { 
      name: 'copy_of_certificate',
      text: `Copy of Certificate`,  
      accepts: ['application/pdf'] 
    }
  ])

  const handleOnChange = ({ index, files }) => {
    setItems(state =>
      state.map((item, _index) => {
        if (_index === index) item.files = files
        return item
      })
    )
  }

  return (
    <div>
    {items.map((item, index) => (
      <FileUpload 
        key={item.name} 
        name={item.name} 
        text={item.text} 
        accepts={item.accepts} 
        onChange={files => handleOnChange({ index, files })} 
      />
    ))}
    </div>
  )
}

License

MIT