Upload URL Input

Input component to enter a URL (or any string for that matter) that will be sent as an upload.

This can be useful for services that accept a URL and do server-side fetch. Cloudinary is such a service.

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

Installation

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

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

Props

| 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 | | placeholder | string | undefined | input's placeholder text | | validate | ValidateMethod | undefined | function to validate input's value before its sent | | uploadRef | React Ref | undefined | ref will be set to the upload callback so it can be triggered from the outs ide (see example) | | ignoreKeyPress | boolean | false | by 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.

Example

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