FileInput React Component

• Docs
• Playground

Install

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

yarn add @idui/react-file-input

See props in Docs

Basic Example without uploading.

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

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

function Example() {
  const [src, setSrc] = useState();
  
  return  <UploadArea>
      <FileInput onChange={setValue} accept="image/*" />
      {src ? <img alt="" src={src} /> : <span>Drop file here or click to upload</span>}
  </UploadArea>
}

Basic Example with uploading.

• if onUpload specified then onChange called with onUpload result

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 <UploadArea>
        <FileInput
            accept="image/*"
            onStartUploading={() => setUploading(true)}
            onUpload={upload}
            onChange={handleChange}
            onError={() => setUploading(false)}
            maxFileSize={10}
        />
        {src ? <img alt="" src={src}/> : <span>Drop file here or click to upload</span>}
    </UploadArea>
}

Custom Upload Area

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  <CustomUploadArea>
      <FileInput onChange={setValue} accept="image/*" />
      {src && <img alt="" src={src} />}
  </CustomUploadArea>
}

Show dragging

• Live example

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 (
        <FileInput {...props} onChange={setValue} accept="image/*" >
            {({ dragContainerProps, fileInput }) =>   <DragUploadArea {...dragContainerProps}>
                {fileInput}

                {value ? <img alt="" src={value} /> : <span>{dragContainerProps.isDragging ? 'Drop here' : 'Drop file here or click to upload'}</span>}
            </DragUploadArea>}
        </FileInput>
    );
}

See more details in storybook

License

MIT © kaprisa57@gmail.com