Skip to main content





npm install @rpldy/upload-button


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>>;

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.


import React, { forwardRef } from "react";
import Uploady from "@rpldy/uploady";
import { asUploadButton } from "@rpldy/upload-button";

const DivUploadButton = asUploadButton(forwardRef(
(props, ref) =>
style={{ cursor: "pointer" }}
DIV Upload Button

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

Live Example

You can see this HOC in action in this codesandbox:

Edit react-uploady-asUploadButton