@achievewithoutborders/file-upload-client 中文文档教程

发布于 4年前 浏览 22 更新于 3年前

@achievewithoutborders/file-upload-client

React 文件上传对话框

Installing

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

Props

Prop nameDescriptionDefault valueExample values
nameName of fielddoctor_name
textValue that will be display on screenDoctor's Name
onChangeEvent that will be called when adding/removing item() => {}function(files) { handleOnChange({ index, files })}
acceptsArray of allowed file typesAll['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

@achievewithoutborders/file-upload-client

React File Upload Dialog

Installing

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

Props

Prop nameDescriptionDefault valueExample values
nameName of fielddoctor_name
textValue that will be display on screenDoctor's Name
onChangeEvent that will be called when adding/removing item() => {}function(files) { handleOnChange({ index, files })}
acceptsArray of allowed file typesAll['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

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文