Numerous Pulsating Martians

    @rpldy/upload-button
    TypeScript icon, indicating that this package has built-in type declarations

    0.18.3 • Public • Published
    npm version circleci status codecov status bundlephobia badge rpldy storybook

    Upload Button

    Upload button component and asUploadButton HOC

    Initiate file upload by opening the browser's native file selection dialog.

    Buttons can use different configuration overrides that supersede the options passed to the parent Uploady.

    Note: Some options cannot be overridden by the button. For example, any prop that influences the file input directly (such as 'multiple')

    The best place to get started is at our: React-Uploady Documentation Website

    Installation

    #Yarn: 
       $ yarn add @rpldy/uploady @rpldy/upload-button 
    
    #NPM:
       $ npm i @rpldy/uploady @rpldy/upload-button 

    Props

    Name (* = mandatory) Type Default Description
    id string undefined id attribute to pass to the button element
    text string "Upload" the button text (in case no children passed)
    className string undefined the class attribute to pass to the button element
    children React.Node undefined child element(s) to render inside the button (replaces text)
    extraProps Object undefined any other props to pass to the button component (with spread)
    ref React ref undefined will be passed to the button element to acquire a ref
    onClick MouseEventHandler undefined function to handle button click (called after showing the system's file selection dialog)

    In addition, most UploadOptions props can be passed to UploadButton. In order to override configuration passed to the parent Uploady component. See Uploady documentation for detailed list of upload options.

    The following guide shows how different upload buttons may use different upload options.

    Example

    Simple Upload Button

    This examples shows how you add Uploady and UploadButton to your app. This is all it takes to get file uploading to work in your React app.

    import React from "react";
    import Uploady from "@rpldy/uploady";
    import UploadButton from "@rpldy/upload-button";
    
    const App = () => (<Uploady
        destination={{ url: "https://my-server/upload" }}>
        <UploadButton/>
    </Uploady>);

    Custom Upload Button (asUploadButton)

    In case you want to use your own component as the upload trigger, use the asUploadButton HOC:

    import React, { forwardRef } from "react";
    import Uploady from "@rpldy/uploady";
    import { asUploadButton } from "@rpldy/upload-button";
    
    const DivUploadButton = asUploadButton(forwardRef(
        (props, ref) =>
            <div {...props} style={{ cursor: "pointer" }}>
                DIV Upload Button
            </div>
    ));
    
    const App = () => (<Uploady
        destination={{ url: "https://my-server/upload" }}>
        <DivUploadButton/>
    </Uploady>);

    Note: asUploadButton makes it possible to gain access to the underlying component with a ref. To support this, it passes along a ref to the component you provide it. For functional components, you'd need to wrap your component with React.forwardRef.

    Install

    npm i @rpldy/upload-button

    DownloadsWeekly Downloads

    3,130

    Version

    0.18.3

    License

    MIT

    Unpacked Size

    18.3 kB

    Total Files

    11

    Last publish

    Collaborators

    • yoavniran