@uploadcare/react-uploader

Uploadcare React Uploader

Welcome to the Uploadcare React Uploader documentation! This library allows you to seamlessly integrate Uploadcare file uploader into your React applications while adhering to React principles.

• Summary about project
• Quick Features
• Install
• Common
  • Usage
    • Regular
    • Inline
    • Minimal
  • Props API
  • Styles
  • File Uploader API
  • Events
• Security issues
• Feedback

Summary about project

This documentation provides guidance on how to use the Uploadcare React Uploader in your projects, along with details about its features, installation process, usage examples, customization options, event handling, and security considerations.

Quick Features

• Seamless integration with React applications
• Three different upload options: Regular, Inline, and Minimal
• Customizable styles
• Access to File Uploader API
• Comprehensive event handling

Install

npm i @uploadcare/react-uploader

Usage

The Uploadcare React Uploader offers three main components for integration. Each component serves specific use cases and can be easily implemented into your project.

Regular

import {FileUploaderRegular} from "@uploadcare/react-uploader";

<FileUploaderRegular pubkey="YOUR_PUBLIC_KEY"/>;

Inline

import {FileUploaderInline} from "@uploadcare/react-uploader";

<FileUploaderInline pubkey="YOUR_PUBLIC_KEY"/>;

Minimal

import {FileUploaderMinimal} from "@uploadcare/react-uploader";

<FileUploaderMinimal pubkey="YOUR_PUBLIC_KEY"/>;

Props API

An easy way to connect React-Uploader to your project and utilize the available API props. We provide a full set of props that are used in blocks. For review we suggest you to look at the documentation.

Styles

You can customize the appearance of the React uploader using the className prop, which allows you to add custom CSS classes to the uploader FileUploader[Regular | Minimal | Inline] wrapper.

import {FileUploaderRegular} from "@uploadcare/react-uploader";

<FileUploaderRegular className="fileUploaderWrapper" pubkey="YOUR_PUBLIC_KEY"/>;

.fileUploaderWrapper lr-file-uploader-regular {
}

File Uploader API

For convenience, we provide the ability to access the File Uploader API using apiRef. You can see what methods are available in apiRef in the documentation. It is important to note that we now pass all InstanceType from UploadCtxProvider.

import React, {useRef, useEffect} from "react";
import {
    FileUploaderRegular,
    UploadCtxProvider
} from "@uploadcare/react-uploader";

const Example = () => {
    const uploaderRef = useRef < InstanceType < UploadCtxProvider > | null > (null);


    <FileUploaderRegular apiRef={uploaderRef} pubkey="YOUR_PUBLIC_KEY"/>;
}

Events

Events in React Uploader are the same as in blocks, see the documentation. The principle of converting events from blocks to React Uploader:

• All events in React Uploader start with on.
• All events in React Uploader in camelCase.

Example:

import {FileUploaderRegular} from "@uploadcare/react-uploader";

<FileUploaderRegular
    pubkey="YOUR_PUBLIC_KEY"
    onModalOpen={() => {
        console.log('modal-open')
    }}
/>

Table of events

Events blocks	Events React Uploader
file-added	onFileAdded
file-removed	onFileRemoved
file-upload-start	onFileUploadStart
file-upload-progress	onFileUploadProgress
file-upload-success	onFileUploadSuccess
file-upload-failed	onFileUploadFailed
file-url-changed	onFileUrlChanged
modal-open	onModalOpen
modal-close	onModalClose
done-click	onDoneClick
upload-click	onUploadClick
activity-change	onActivityChange
common-upload-start	onCommonUploadStart
common-upload-progress	onCommonUploadProgress
common-upload-success	onCommonUploadSuccess
common-upload-failed	onCommonUploadFailed
change	onChange
group-created	onGroupCreated

Security issues

If you think you ran into something in Uploadcare libraries that might have security implications, please hit us up at [e-mail] or Hackerone.

We'll contact you personally in a short time to fix an issue through co-op and prior to any public disclosure.

Feedback

Issues and PRs are welcome. You can provide your feedback or drop us a support request at [e-mail].