Skip to main content





npm install @rpldy/upload-paste


interface PasteProps extends UploadOptions, PasteCompProps {}

type withPasteUpload =
<T>(component: React.ForwardRefExoticComponent<T> | React.ComponentType<T>) => React.FC<PasteProps>;

A HOC that turns the wrapped component into a paste target. Meaning, when user focuses and pastes, will pass the files (if there are any) from the clipboard to be uploaded.


Name (* = mandatory)TypeDefaultDescription
idstringundefinedid attribute to pass to the button element
classNamestringundefinedthe class attribute to pass to the button element
childrenReact.Nodeundefinedchild element(s) to render inside the button (replaces text)
extraPropsObjectundefinedany other props to pass to the wrapped component (with spread)
refReact refundefinedwill be passed to the button element to acquire a ref
onPasteUploadPasteUploadHandlerundefinedfunction called when paste to upload occurs


import React from "react";
import styled from "styled-components";
import Uploady from "@rpldy/uploady";
import withPasteUpload from "@rpldy/upload-paste";

const SimpleContainer = styled.div`
width: 400px;
height: 400px;

const PasteArea = withPasteUpload(SimpleContainer);

const MyApp = () => {
const onPasteUpload = useCallback(({ count }) => {
console.log("PASTE-TO-UPLOAD file count: ", count);
}, []);

return <Uploady destination={{ url: "" }}>
<PasteArea onPasteUpload={onPasteUpload} autoUpload={false}>
Paste file here to upload