@achievewithoutborders/file-upload-client 中文文档教程
@achievewithoutborders/file-upload-client
React 文件上传对话框
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
@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
更多