File-Uploader

• Introduction
• Installation
• Example
• License

Introduction

Peer dependencies: react, react-dom, @types/react

Installation

npm i @muzikanto/file-uploader
# or
yarn add @muzikanto/file-uploader

Example

Example in storybook

function Component() {
    return (
        <FileUploader
            // files={files}
            // onChange={nextFiles => setFiles(nextFiles)}
            onChange={console.log}
            multiple
            accept={['image/jpeg', 'image/png']}
            maxSize={1024 * 100}
            onErrors={console.log}
            validate={el => el.name.indexOf('.pdf') != -1 ? 'custom error' : undefined}
        >
            {
                ({onClick, files, change, dragged, onDragEnter, onDragLeave, onDragOver, onDrop}) => {
                    return (
                        <>
                            <div
                                style={dragged ? { border: 'dashed 1px black'} : undefined}
                                onClick={onClick}
                                onDragEnter={onDragEnter}
                                onDragOver={onDragOver}
                                onDragLeave={onDragLeave}
                                onDrop={onDrop}
                            >
                                Drag & Drop your files or Browse
                            </div>
                            {
                                files.map(({file, error, success}, i) => {
                                    return (
                                        <>
                                          <span
                                               key={'file-' + i}
                                               style={{backgroundColor: success ? 'green' : 'red'}}
                                           >
                                            {file.name} ({file.size})
                                          </span>  
                                          {
                                              error &&
                                              <span>{error}</span>
                                          }
                                        </>
                                    );
                                })
                            }
                        </>
                    )
                }
            }
        </FileUploader>
    );
}

License

MIT