Skip to content

uploadcare/file-uploader

Folders and files

NameName
Last commit message
Last commit date
Nov 7, 2023
Apr 19, 2023
Nov 7, 2023
Jul 24, 2023
Nov 10, 2023
Feb 3, 2023
Apr 19, 2023
Nov 9, 2023
May 3, 2023
Jun 22, 2022
Nov 7, 2023
Oct 12, 2023
Apr 5, 2022
Jul 20, 2022
May 30, 2022
Aug 11, 2023
Apr 19, 2023
Dec 15, 2021
Jun 16, 2023
Jul 20, 2022
Jan 24, 2023
Jul 20, 2022
Apr 13, 2023
Oct 31, 2023
Apr 19, 2022
Sep 2, 2022
Apr 4, 2022
Aug 7, 2023
Apr 6, 2022
Jul 19, 2023
May 16, 2022
Apr 20, 2023
Jun 9, 2023
Oct 31, 2023
Aug 31, 2022
Jul 5, 2023
Nov 7, 2023
Nov 7, 2023
Apr 19, 2022
May 30, 2022
Aug 31, 2022
May 27, 2022
Nov 7, 2023
Nov 7, 2023
Jul 21, 2022

Repository files navigation

Uploadcare logo

WebsiteQuick StartDocsBlogDiscordTwitter

📦 Uploadcare Blocks: stack-agnostic library for uploading, processing, and editing images on-the-fly

npm version GitHub Actions License

Uploadcare Blocks is a powerful JavaScript library for creating custom file-handling services. It includes various interactive and customizable UI components to enhance users' file uploading and processing experience. As a bonus, you receive all the Uploadcare's versatile file-handling capabilities, including smart CDN, MIME-type filtering, signed uploads, and even more.

See Uploadcare Blocks in action!

Uploadcare Blocks examples

Core features

  • Coming soon! Web Components for any media content management like audio, video, image galleries, and more.

Why Uploadcare Blocks?

Rapid integration

We provide a ready-to-use set of UI components for file handling. It saves you valuable development time and effort, allowing you to focus on other core aspects of your application. You even don't need to build a stage while developing — just run the code directly from the browser.

Cross-platform compatibility

Uploadcare Blocks are designed to work seamlessly across various platforms and frameworks. Whether you're building a web application using React, Vue.js, Angular, Svelte, or other frameworks, you get integrations and support for various development environments.

Developer-friendly

The library comes with modern technologies at your fingertips, like Web Components, ESM-level code sharing, and other cutting-edge web standards. Uploadcare Blocks is designed lightweight with minimum external dependencies for a cheap security audit.

Typescript support

We use JSDoc type annotations and type definitions (*.d.ts files) for TypeScript static analysis support during development.

🚀 Getting started

From CDN

  1. Connect Uploadcare Blocks directly from your document replacing {{PACKAGE_VERSION}} with the latest version of the package:
<script type="module">
  import * as LR from 'https://cdn.jsdelivr.net/npm/@uploadcare/blocks@{{PACKAGE_VERSION}}/web/blocks.min.js';
  
  LR.registerBlocks(LR);
</script>
  1. Start using Uploadcare Blocks in your application markup (don't forget to specify {{PACKAGE_VERSION}} with the latest one):
<lr-file-uploader-regular
  css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@{{PACKAGE_VERSION}}/web/lr-file-uploader-regular.min.css"
  ctx-name="my-uploader"
>
</lr-file-uploader-regular>
  1. Configure Uploadcare Blocks and add your personal public key to the project. Discover the instructions in the following section.

From NPM

  1. Install Uploadcare Blocks package: npm i --save-exact @uploadcare/blocks
  2. Connect Blocks from your script file:
import * as LR from '@uploadcare/blocks';

LR.registerBlocks(LR);
  1. Start using Uploadcare Blocks in your application markup and replace {{PACKAGE_VERSION}} with the latest version of the package:
<lr-file-uploader-inline
  css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@{{PACKAGE_VERSION}}/web/lr-file-uploader-inline.min.css"
  ctx-name="my-uploader"
>
</lr-file-uploader-inline>
  1. Configure Uploadcare Blocks and add your personal public key to the project. Discover the instructions in the following section.

Configuration

All configurations in Uploadcare Blocks are managed from lr-config block.

  1. Sign up to Uploadcare.
  2. Get a Public API key in Uploadcare project's dashboard.
  3. Add a lr-config block to your markup and replace YOUR_PUBLIC_KEY with your own public key:
<lr-config
  ctx-name="my-uploader"
  pubkey="YOUR_PUBLIC_KEY"
></lr-config>
  1. Make sure that your config block uses the same ctx-name attribute value as your solution block.

Discover more about Uploadcare Blocks configuration in our documentation.

Deep dive in Uploadcare Blocks 🛠

Follow our step-by-step installation guide to launch Uploadcare Blocks in a few minutes and set it up based on your needs.

Browser support

Latest desktop and mobile stable versions of Chrome, Edge, Firefox, Opera, and Safari are supported.

Internet Explorer is outdated and not supported anymore.

Framework support

Uploadcare Blocks is a framework-agnostic solution, so you can use it with any runtime you like. Discover the integration examples:

All the source code is accessible and works in raw mode. Use developer tools to dive into details.

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 [email protected].
  • Ask questions on Stack Overflow with "uploadcare" tag if others can have these questions as well.
  • Fork project, make changes and send it as pull request. For launching the developing mode follow these commands:
    • Install dependencies: npm install.
    • Start local dev-server: npm run dev.
  • Star this repo if you like it ⭐️