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