Narcoleptic Pony Machine

    @muzikanto/file-uploader
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    File-Uploader

    npm version downloads dependencies Status size

    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

    Install

    npm i @muzikanto/file-uploader

    DownloadsWeekly Downloads

    111

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    11.4 kB

    Total Files

    7

    Last publish

    Collaborators

    • muzikanto