+
+
+
+
+ Website • + Quick Start • + Docs • + Blog • + Discord • + Twitter +
+ +# React File Uploader with Uploadcare Blocks + +[](https://codesandbox.io/s/github/uploadcare/blocks-examples/tree/main/examples/react-uploader/) + +This is an example project of implementing a file uploader in a React application with [Uploadcare Blocks](https://github.com/uploadcare/blocks). + +## Run this demo locally + +```bash +# 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/blocks`](https://www.npmjs.com/package/@uploadcare/blocks) 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/blocks/types/jsx` in the `types` array of your tsconfig.json: + +```json +{ + "types": ["@uploadcare/blocks/types/jsx"] +} +``` + +[Read more about installation](https://uploadcare.com/docs/file-uploader/installation/) in the Uploadcare documentation. + +## Configuration + +Please, read the [File Uploader documentation](https://uploadcare.com/docs/file-uploader/). + +## 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](src/components/FileUploader/FileUploader.tsx) 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](https://uploadcare.com/docs/file-uploader/events/). + You will find them in the example. It's easy to handle using hooks like [`useEffect`](https://react.dev/reference/react/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](https://uploadcare.com/docs/file-uploader/api/) + to control its behavior. + +### Styling + +If your styling solution may provide class string or style object, feel free to use them on blocks like +`lr-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](https://uploadcare.com/docs/file-uploader/styling/) in the File Uploader docs. + +## Contribution + +You’re always welcome to contribute: + +* Create [issues](https://github.com/uploadcare/blocks-examples/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](https://stackoverflow.com/questions/tagged/uploadcare) with "uploadcare" tag if others can have these questions as well. +* Star this repo if you like it ⭐️ diff --git a/examples/react-custom-tab/index.html b/examples/react-custom-tab/index.html new file mode 100644 index 0000000..3246eb2 --- /dev/null +++ b/examples/react-custom-tab/index.html @@ -0,0 +1,12 @@ + + + + + +