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