47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import React, { useRef } from 'react'
|
|
import { t } from '@/scripts/i18n'
|
|
import styles from './FileInput.module.scss'
|
|
|
|
interface Props {
|
|
file: File | null
|
|
accept?: string
|
|
onChange(event: React.ChangeEvent<HTMLInputElement>): void
|
|
}
|
|
|
|
const FileInput: React.FC<Props> = props => {
|
|
const ref = useRef<HTMLInputElement>(null)
|
|
|
|
const handleClick = () => {
|
|
ref.current!.click()
|
|
}
|
|
|
|
return (
|
|
<div className="form-group">
|
|
<label htmlFor="select-file">{t('skinlib.upload.select-file')}</label>
|
|
<div className="input-group">
|
|
<div className="custom-file">
|
|
<input
|
|
type="file"
|
|
className="custom-file-input"
|
|
id="select-file"
|
|
accept={props.accept}
|
|
title={t('skinlib.upload.select-file')}
|
|
ref={ref}
|
|
onChange={props.onChange}
|
|
/>
|
|
<label className={`custom-file-label ${styles.label}`}>
|
|
{props.file?.name}
|
|
</label>
|
|
</div>
|
|
<div className="input-group-append">
|
|
<button className="btn btn-default" onClick={handleClick}>
|
|
{t('skinlib.upload.select-file')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default FileInput
|