@rpldy/upload-paste

Upload Paste

The main feature is the withPasteUpload HOC, which allows any component to become a trigger of paste-to-upload. A user pasting (ctrl/cmd+v) a file or files while focused on the element will trigger an upload

The best place to get started is at our: React-Uploady Documentation Website

Installation

#Yarn: 
   $ yarn add @rpldy/uploady @rpldy/upload-paste 

#NPM:
   $ npm i @rpldy/uploady @rpldy/upload-paste   

withPasteUpload

withPasteUpload(ComponentType) => React.FC

PasteProps

Name (* = mandatory)	Type	Default	Description
id	string	undefined	id attribute to pass to the button element
className	string	undefined	the class attribute to pass to the button element
children	React.Node	undefined	child element(s) to render inside the button (replaces text)
extraProps	Object	undefined	any other props to pass to the wrapped component (with spread)
ref	React ref	undefined	will be passed to the button element to acquire a ref
onPasteUpload	PasteUploadHandler	undefined	function called when paste to upload occurs

In addition, most UploadOptions props can be passed to the component returned from calling withPasteUpload. In order to override configuration passed to the parent Uploady component. See Uploady documentation for detailed list of upload options.

Example

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: "my-server.com/upload" }}>
        <PasteArea onPasteUpload={onPasteUpload} autoUpload={false}>
            Paste file here to upload
        </PasteArea>
    </Uploady>;
};

Hooks

usePasteUpload

(uploadOptions: UploadOptions, element: React.RefObject, onPasteUpload: PasteUploadHandler) => { toggle: () => boolean, getIsEnabled: () => boolean }

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)

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