Skip to main content





npm install @rpldy/upload-url-input


npm install @rpldy/uploady @rpldy/upload-url-input

Must be rendered inside (child/descendant) of an Uploady instance


Name (* = mandatory)TypeDefaultDescription
idstringundefinedid attribute to pass to the button element
classNamestringundefinedthe class attribute to pass to the button element
placeholderstringundefinedinput's placeholder text
validateValidateMethodundefinedfunction to validate input's value before its sent
uploadRefReact Refundefinedref will be set to the upload callback so it can be triggered from the outside (see example)
ignoreKeyPressbooleanfalseby default pressing Enter will initiate the upload, set to true in order to disable this behavior

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


type ValidateMethod = (value: string | undefined, input: HTMLInputElement | undefined) => boolean;

When specified, should return true (truthy) to indicate the input's value is valid. Should return false (falsy) in case the value isn't valid and to prevent the upload from taking place.


The value of the ref (current) will be set with a function that can be called when the input's value should be handed to the uploader. This is the equivalent of selecting a file of dropping a file in the drop-zone.


import React, { useRef } from "react";
import Uploady from "@rpldy/uploady";
import UploadUrlInput from "@rpldy/upload-url-input";

const MyUrlUpload = () => {
const uploadRef = useRef(null);

const onClick = () => {
if (uploadRef && uploadRef.current) {
uploadRef.current(); //initiate upload

return <Uploady>
<UploadUrlInput placeholder="URL to upload"
uploadRef={uploadRef} />

<button onClick={onClick}>Upload</button>