@uploadcare/blocks

Blocks: web components for the Uploadcare platform integrations

💎 Core concepts

• All in one place: here, you can find everything you need to build a modern and reliable web application with Uploadcare on board.
• Modern technologies: web components, service workers, wasm, and other cutting edge web standards are ready to show their power.
• Type safety with a JSDoc declaration and TypeScript static analysis.
• Modern ESM-level code sharing.
• The build stage is unnecessary for development: use the code directly in any modern browser or node.js.
• Fast and secure.
• Minimum of external dependencies: security audit is not expensive.
• We try to be as close to the native web platform as possible and not force you to use any specific development environment tools.
• Tested by an Uploadcare community.

📦 What’s in the box?

• File uploader solutions - file uploader implementations for the most frequent use cases.
• Blocks to build your own custom solutions - build your own integration solutions with simple HTML and CSS.
• Adaptive image solution: all you need to distribute your web images efficiently.
• Cloud image editing solution: tune your pictures on the fly.
• Web components for media content representation: audio, video, image galleries, etc.
• etc.

⚙️ Installation and start

Installation process is very easy and takes minutes. See our Installation guide.

Typescript support

We use JSDoc type annotations for TypeScript static analysis support during development.

Also, we provide type definitions (*.d.ts files) for the TypeScript projects in our packages.

Check the JSDoc Reference page in TypeScript official documentation.

Supported browsers

Blocks are supported and tested in all major modern desktop and mobile browsers:

• Chrome
• Firefox
• Safari
• Edge
• Opera
• etc.

Internet Explorer is outdated and not supported anymore.

Frameworks support

Blocks are a framework-agnostic solution, so you can use it with any runtime you like. We have prepared examples for most popular frameworks.

• React example
• Vue example
• Angular example
• Svelte example

🚀 Feedback

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

Contribution

1. Clone repository: git clone [e-mail]:uploadcare/blocks.git ./.
2. Run dependencies setup: npm install.
3. Start local dev-server: npm run dev.

Browse documentation and live examples ➡️

All the source code in demos is accessible and works in raw mode (as is), so you can use your browser developer tools to discover it in detail.

Changelog

0.13.0 (2022-10-17)

Bug Fixes

• drop-area: open modal on files drop (6c112a8)

Features

• simple-button: show drop area on files drag (25fa023)