Skip to content

Latest commit

 

History

History

react-uploader

README.md

Uploadcare logo

Website • Quick Start • Docs • Blog • Discord • Twitter

React File Uploader with Uploadcare Blocks

Edit react-uploader

This is an example project of implementing a file uploader in a React application with Uploadcare Blocks.

Run this demo locally

# clone this repo and go to the cloned folder

$ cd examples/react-uploader

$ npm install
# or `yarn install`, if you wish

$ npm run start
# or `yarn start`

Installation

All you need to do is to install @uploadcare/file-uploader from npm via your favorite Node package manager.

The package provides TypeScript types, so you do not need to install @types/anything if you need a proper typing. However, if you want to get JSX types right, add @uploadcare/file-uploader/types/jsx in the types array of your tsconfig.json:

{
  "types": ["@uploadcare/file-uploader/types/jsx"]
}

Read more about installation in the Uploadcare documentation.

Configuration

Please, read the File Uploader documentation.

Integration notes

Blocks are native to the Web but not to React. It's easy to use Blocks in a React app, but note that a part of your solution will encapsulate non-React code.

E.g. in one of the examples we created a FileUploader component which provides React-friendly API for the rest of the view. There are Blocks inside of this component and nowhere else.

Non-React things you should know about

  1. Communicate with Blocks File Uploader with events. You will find them in the example. It's easy to handle using hooks like useEffect.

  2. Use class attribute instead of className.

  3. Some attributes required by Blocks are kebab-cased, not camelCased as usual for React world.

  4. You are able to invoke some methods of File Uploader to control its behavior.

Styling

If your styling solution may provide class string or style object, feel free to use them on blocks like uc-file-uploader-regular and override default class using CSS variables.

Otherwise you may go “full override” way and pass a string with styles to a File Uploader type of your choice.

Read more about styling in the File Uploader docs.

Contribution

You’re always welcome to contribute:

  • Create issues every time you feel something is missing or goes wrong.
  • Provide your feedback or drop us a support request at hello@uploadcare.com.
  • Ask questions on Stack Overflow with "uploadcare" tag if others can have these questions as well.
  • Star this repo if you like it ⭐️