git.iko.soy/bridge
on 4a210ca help sign in
bridge/src/form/UploadInput.js
51 lines 1.2 kB history raw
1import React, { useCallback } from 'react';
2import { useField } from 'react-final-form';
3import UploadButton from 'components/UploadButton';
4import { AccessoryIcon } from 'indigo-react';
6export default function UploadInput({ name, label, ...rest }) {
7 const {
8 input,
9 meta: { validating, submitting, touched, active, error },
10 } = useField(name, { type: 'text' });
12 const handleUpload = useCallback(
13 element => {
14 input.onFocus();
16 const file = element.files.item(0);
17 const reader = new FileReader();
19 reader.onload = e => {
20 input.onChange({ target: { value: e.target.result } });
21 };
23 const failure = _ => {
24 input.onBlur();
25 };
27 reader.onerror = failure;
28 reader.onabort = failure;
30 reader.readAsText(file);
31 },
32 [input]
33 );
35 return (
36 <UploadButton
37 onChange={handleUpload}
38 accessory={
39 touched && !active && error ? (
40 <AccessoryIcon.Failure />
41 ) : validating || submitting ? (
42 <AccessoryIcon.Pending />
43 ) : (
44 undefined
45 )
46 }
47 {...rest}>
48 {label}
49 </UploadButton>
50 );