React FileInput Component
npm install @idui/react-file-input




- Docs
- Playground
``bash`
npm install --save @idui/react-file-input
`bash`
yarn add @idui/react-file-input
- 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}
}
`
- 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
onStartUploading={() => setUploading(true)}
onUpload={upload}
onChange={handleChange}
onError={() => setUploading(false)}
maxFileSize={10}
/>
{src ? : Drop file here or click to upload}
}
`
`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 && }
}
`
`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'}}
}
);
}
``
MIT © kaprisa57@gmail.com