️asUploadButton

Package

@rpldy/upload-button

Installation

npm

npm install @rpldy/upload-button

Yarn

yarn add @rpldy/upload-button

pnpm

pnpm add @rpldy/upload-button

Details

export interface ButtonProps<E = Element> {
    className?: string;
    id?: string;
    children?: JSX.Element[] | JSX.Element | string;
    text?: string;
    extraProps?: Record<string, unknown>;
    ref?: React.RefObject<any>;
  	onClick?: React.MouseEventHandler<E>;
}

export interface UploadButtonProps<E = Element> extends ButtonProps<E>, UploadOptions {}

type asUploadButton = <T, E = Element>(component: React.ForwardRefExoticComponent<T> | React.ComponentType<T>) => React.FC<UploadButtonProps<E>>;

• See: UploadOptions

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

The props that the new component (returned by HOC) are the same as described in the Upload Button Props table. In order to pass props to the wrapped component, use the extraProps prop.

Example

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" }}
          ref={ref}
        >
          DIV Upload Button
        </div>
));

const App = () => (<Uploady
    destination={{ url: "https://my-server/upload" }}>
    <DivUploadButton/>
</Uploady>);

Live Example

You can see this HOC in action in this codesandbox: