Blocks — the next file uploader

npm version

Blocks is a highly customizable widget that allows users to upload files from various sources, utilizing the power of Uploadcare APIs.

We supply a set of ready-made solutions for the most frequent file uploading cases. Use it as is or as a custom build reference.

On top of that, it includes a built-in cloud image editor that provides a few dozens popular image edit operations.

Features

Blocks are very simple to customize and localize with basic HTML and CSS.

Add a file uploading capability to your website:

  • Receive files from anybody.
  • Upload files of any type and up to 5 TB in size.
  • Upload multiple files in one go.
  • Track upload jobs with an individual progress bar for each file.
  • Get files from various sources, including local storage, camera, social media, and cloud storage services.
  • Speed up the uploading with the uploading network (it works like CDN).
  • Show image previews.
  • Resize, crop, rotate, add effects, enhance images, add overlays right after upload.
  • Validate files by their format or size.
  • Prevent remote code execution through widgets and code execution in uploaded files like SVG, html and xml.

All your uploads go to the storage covered by SLA with a 99.9% uptime. On top of that, Uploadcare infrastructure is compliant with SOC 2, HIPAA, and more.

Framework support

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

Supported browsers

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

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Opera

If you require IE support, please use the previous version.

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.

Technology behind

We try to build Blocks as close to the native web platform as possible and do not force you to use any specific development environment tools.

Blocks are built with web components, service workers, wasm, and a set of other modern technologies. Modern ESM-level code sharing. Minimum of external dependencies.

The build stage is unnecessary for development. Use the code directly in any modern browser or Node.js. We encourage you to build your custom solutions with all building blocks that we have.

In contrast to the previous version of our file uploader, this version is 57% lighter, has a modern and highly customizable view, and works with any JavaScript framework.

Documentation

You can find Blocks documentation and live examples on GitHub .