@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.
• Minimum of external dependencies: security audit is not expensive.
• Fast and secure.
• We try to be as close to the native web platform as possible and not force you to use any specific development environment tools.

📦 What’s in the box?

• File uploading solutions — file uploader implementations for the most frequent use cases.
• Blocks to build custom solutions — build your integrations with a simple HTML and CSS.
• Adaptive image — all you need to distribute your web images efficiently.
• Cloud image editor — tune your pictures with our CDN image processing right after they're uploaded.
• Soon: web components for media content representation: audio, video, image galleries, etc.

⚙️ Installation and start

Installation process is easy and takes minutes. See the installation guide.

Typescript support

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

Additionally, 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

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 the most popular frameworks.

• React
• Vue
• Angular
• Svelte

🚀 Contribution

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

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), you can use your browser developer tools to discover it in detail.

Changelog

0.17.0 (2023-02-08)

Bug Fixes

• cloud-image-editor: dispatch events with bubble and composed flags (58733c4)
• cloud-image-editor: fix extraction of filter operation with undefined value (351b080)
• cloud-image-editor: pause render until container get non-zero size (1e5a4a8)

Features

• cloud-image-editor: Add change event (1fff5fb)