@achievewithoutborders/file-upload-client NPM

@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/*'(https://www.w3schools.com/tags/att_input_accept.asp)

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>
  )
}