FileInput React Component


- Docs
- Playground

Install

``bash
npm install --save @idui/react-file-input
`

`bash
yarn add @idui/react-file-input
`

$3

$3

- Live example
- if onUpload not specified onChange called with FileReader result

`jsx
import React from 'react'
import FileInput, { UploadArea } from '@idui/react-file-input'

function Example() {
const [src, setSrc] = useState();

return

{src ? : Drop file here or click to upload}

}
`

$3

- if onUpload specified then onChange called with onUpload result

`jsx
import React from 'react'
import FileInput, {UploadArea} from '@idui/react-file-input'

// if multiple then here would be files array
const upload = (file) => {
// should return Promise
return fetch('http://example.com', {
method: 'POST',
body: file
}).then(response => response.json().data.src)
};

function Example() {
const [src, setSrc] = useState();
const [isUploading, setUploading] = useState();

const handleChange = (newSrc) => {
setUploading(false);
setSrc(newSrc)
};

return
accept="image/*"
onStartUploading={() => setUploading(true)}
onUpload={upload}
onChange={handleChange}
onError={() => setUploading(false)}
maxFileSize={10}
/>
{src ? : Drop file here or click to upload}

}
`

$3

`jsx
import React from 'react'
import styled from 'styled-components';
import FileInput from '@idui/react-file-input'

const CustomUploadArea = styled.div
position: relative;
width: 15rem;
height: 15rem;
border-radius: 50%;
backgroun-color: orangered;
img {
height: 100%;
width: auto;
max-width: 100%;
}

function Example() {
const [src, setSrc] = useState();

return

{src && }

}
`

$3

- Live example

`jsx
import React from 'react'
import FileInput, { UploadArea } from '@idui/react-file-input'

const DragUploadArea = styled(UploadArea)
height: 40rem;
width: 60rem;
background-color: ${props => props.isDragging ? '#C7F9F1' : '#FFFFFF'};

export function DragAndDropExample({ onUpload, ...props }) {
const [value, setValue] = useState();

return (

{({ dragContainerProps, fileInput }) =>
{fileInput}

{value ? : {dragContainerProps.isDragging ? 'Drop here' : 'Drop file here or click to upload'}}
}

);
}
``

$3

License

MIT © kaprisa57@gmail.com