Skip to main content

usePasteUpload

Package​

@rpldy/upload-paste

Installation​

npm install @rpldy/upload-paste

Details​

type PasteUploadHookResult = { toggle: () => boolean, getIsEnabled: () => boolean};

type usePasteUpload =
(uploadOptions: UploadOptions, element: React.RefObject<HTMLHtmlElement>, onPasteUpload: PasteUploadHandler) => PasteUploadHookResult;

The hook makes it possible to enable paste listening for file(s) on the window (so paste anywhere) or on a specific element (by passing a ref)

Example​

import React from "react";
import Uploady from "@rpldy/uploady";
import { usePasteUpload } from "@rpldy/upload-paste";

const ElementPaste = (props) => {
const containerRef = useRef(null);

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

const { toggle, getIsEnabled } = usePasteUpload(props, containerRef, onPasteUpload);

//toggle can be used in a button click handler to turn paste listening on/off

return <>
<div ref={containerRef}>
Click here & Paste a file
Paste is: {getIsEnabled() ? "enabled" : "disabled"}
</div>
</>;
};


const MyApp = () => {
return <Uploady destination={{ url: "my-server.com/upload" }}>
<ElementPaste
autoUpload={false}
params={{ test: "paste" }}
/>
</Uploady>;
};