> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://uploadcare.com/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://uploadcare.com/docs/_mcp/server.

# Quick Start

> Get started with Uploadcare by integrating the File Uploader widget to upload files to your web app efficiently.

This step-by-step guide will help you get started with Uploadcare,
enabling you to upload files into your web application with
a plug-and-play File Uploader widget and deliver them efficiently.

Uploadcare is a file management platform and CDN designed for user-generated content.
It offers a powerful API for uploading, storing, optimizing, transforming, and delivering files.

[File Uploader](/docs/file-uploader/) is a highly customizable widget that allows users to securely
and efficiently upload files from various sources.
It leverages the capabilities of Uploadcare APIs and is compatible with any web tech stack.

> **Info**
>
> By default, files are delivered from your project's subdomain on `*.ucarecd.net` (for example, `demo.ucarecd.net`).
> Accounts registered before September 4, 2025 can still use the legacy global domain `ucarecdn.com`.

## Before you begin

To get started, you need an Uploadcare account.

#### [Sign up](https://app.uploadcare.com/accounts/signup/)

If you've never used Uploadcare before, sign up for a new account

#### [Log in](https://app.uploadcare.com/)

If you already have a Uploadcare account, log in to get started

Your new account will be free to explore all [Pro plan features](https://uploadcare.com/pricing/)
during the [trial](/docs/billing/#trial).

## Integrate File Uploader

File Uploader can be integrated into apps using your preferred web tech stack. \

[See all available integrations](/docs/integrations/).

Follow these steps to integrate the uploading widget into your application using JavaScript.

### Create project

Projects are independent environments with unique API keys, dedicated storage, and other settings.
You can create multiple projects for one account.
When creating a project, select the **Built-in storage** option.

### Get API Key

Retrieve the [public API key](https://app.uploadcare.com/projects/-/api-keys/)
from the project you created. You'll need this key in next steps.

### Install widget

Copy and paste the following script into the body of your application where you want the widget to appear:

```html
 <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.css"
    >
    <script type="module">
      import * as UC from 'https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.js';
      UC.defineComponents(UC);
    </script>

    <uc-config
      ctx-name="my-uploader"
      source-list="local, url, camera, dropbox"
      pubkey="YOUR_PUBLIC_KEY"
    ></uc-config>

    <uc-file-uploader-regular
      ctx-name="my-uploader"
      class="uc-light"
    ></uc-file-uploader-regular>
```

Learn more about other [installation options](/docs/file-uploader/installation/) for uploading widgets.

This example uses a `regular` configuration, where the uploading widget can handle
files from sources such as a local device, URL, camera, or Dropbox.

#### [Configuration examples](https://codesandbox.io/p/devbox/github/uploadcare/blocks-examples/tree/main/examples/js-uploader/?file=%2Findex.html)

View in CodeSandbox

### Receive files

Once installed, the File Uploader widget is ready to receive files from users.
Uploaded files are added to your project and stored in [Uploadcare storage](/docs/uploads/storage/).

You can view all uploaded files in the [Files section](https://app.uploadcare.com/projects/-/files/)
or get a [List of files](https://uploadcare.com/docs/api/rest/file/files-list)
programmatically via REST API.

## Deliver files

Each uploaded file is assigned a unique identifier (UUID) and becomes accessible via Uploadcare's Image CDN:

```url
https://:subdomain.ucarecd.net/:UUID/
```

`:subdomain` is your project's subdomain. Find it in [Delivery](https://app.uploadcare.com/projects/-/settings/#delivery).

Legacy global domain (for accounts created before September 4, 2025): `https://ucarecdn.com/:UUID/`

[Uploadcare Image CDN](/docs/delivery/) lets you deliver files by embedding
their URLs into your application.

### Get file URL

There are 3 ways to get the URL of the uploaded file:

* Programmatically, using [uploading widget API](/docs/file-uploader/api/) and [events](/docs/file-uploader/events/).
* By enabling [webhooks](/docs/webhooks/) to receive notifications whenever a file is uploaded.
* Using [HTML form](/docs/file-uploader/html-forms/).

  **HTML-form example**

  ```html
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.css"
    >
    <script type="module">
      import * as UC from 'https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.js';
      UC.defineComponents(UC);
    </script>

    <uc-config
      ctx-name="my-uploader"
      pubkey="YOUR_PUBLIC_KEY"
    ></uc-config>

    <form>
      <uc-file-uploader-regular
        ctx-name="my-uploader"
      >
        <uc-form-input ctx-name="my-uploader"></uc-form-input>
      </uc-file-uploader-regular>
      <input type="Submit" />
    </form>
  ```

  After the file is uploaded, all data, including the file URL, is sent
  to the form's handler, where the uploading widget is embedded.

### Optimize images

Image format conversion to AVIF or WebP is enabled by default for all files loaded into a project.
You can disable it in the [Delivery section](https://app.uploadcare.com/projects/-/settings/#delivery)
of the Dashboard.

You can automatically compress all images in the project without quality loss if necessary.
Enable Adaptive quality toggle in the [Delivery section](https://app.uploadcare.com/projects/-/settings/#delivery)
of the Dashboard. This feature only works when a URL-based transformation,
such as the [`preview` operation](/docs/transformations/image/resize-crop/#operation-preview), is applied.

Applying a `preview` size of 1024x1024 to an image resizes it to fit within a 1024x1024
square while preserving its aspect ratio. When the auto format and adaptive quality
toggles are enabled, the image is automatically delivered in the most suitable
format with an optimized compression level:  \

`https://:subdomain.ucarecd.net/:UUID/-/preview/1024x1024/`

<table>
  <tr>
    <td>
      [![Original image](https://examples.ucarecd.net/f70b3810-1f72-4ad3-97c9-fd1c9c24db6f/-/preview/440x440/-/quality/lighter/)](https://examples.ucarecd.net/f70b3810-1f72-4ad3-97c9-fd1c9c24db6f/)

      \

    </td>

    <td>
      [![Preview image](https://examples.ucarecd.net/f70b3810-1f72-4ad3-97c9-fd1c9c24db6f/-/preview/440x440/-/quality/lighter/)](https://examples.ucarecd.net/f70b3810-1f72-4ad3-97c9-fd1c9c24db6f/-/preview/1024x1024/)

      \

    </td>
  </tr>

  <tr>
    <td>
      `https://:subdomain.ucarecd.net/:UUID/` \

      Original image \

      4554×2936 \

      1,3 МB
    </td>

    <td>
      `https://:subdomain.ucarecd.net/:UUID/-/preview/1024x1024/` \

      Optimized image \

      1024×660 \

      147 КB
    </td>
  </tr>
</table>

You can use the [built-in adaptive image web component](/docs/adaptive-image/)
to automate responsive image delivery, improving load times and
performance across various devices for your users.

1. Connect the script:
   ```html
   <script src="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@v1/web/uc-img.min.js" type="module"></script>
   ```

2. Configure basic settings:
   ```css
     uc-img {
       --uc-img-pubkey: '$YOUR_PUBLIC_KEY';
       --uc-img-breakpoints: '200, 500, 800';
   }
   ```

3. Use `<uc-img>` tag for the images in your HTML templates:
   ```html
   <uc-img uuid="UUID"></uc-img>
   ```
   The component will generate adaptive image sets to be cached in the CDN.

4. Specify a list of breakpoints:
   ```html
   <style>
     @import url('./test.css');

     uc-img {
       --uc-img-breakpoints: '400, 800, 1200';
     }
   </style>

   <uc-img src="UUID"></uc-img>
   ```
   The browser will select the most suitable image size automatically.

### Transform images

Modify images, resize them, and apply filters or watermarks using
[URL-based transformations](/docs/transformations/image/).
Each transformation creates a new cached version of the image on the fly
while the original file remains untouched.

Make a thumbnail of the original image, [resize](/docs/transformations/image/resize-crop/#operation-resize)
it, and make it [grayscale](/docs/effects-enhancements/#operation-grayscale):  \

`https://:subdomain.ucarecd.net/:UUID/-/resize/100x/-/grayscale/`

<table>
  <tr>
    <td>
      [![Original image](https://examples.ucarecd.net/ae5efbb9-d0b7-4900-936d-f318b44fe580/-/preview/440x440/-/quality/lighter/)](https://examples.ucarecd.net/ae5efbb9-d0b7-4900-936d-f318b44fe580/)

      Original image \

      `https://:subdomain.ucarecd.net/:UUID/`
    </td>

    <td>
      [![Thumbnail](https://examples.ucarecd.net/ae5efbb9-d0b7-4900-936d-f318b44fe580/-/resize/100x/-/grayscale/-/quality/lighter/)](https://examples.ucarecd.net/ae5efbb9-d0b7-4900-936d-f318b44fe580/-/resize/100x/-/grayscale/)

      Thumbnail\

      `-/resize/100x/-/grayscale/`
    </td>
  </tr>
</table>

## Next steps

Continue your Uploadcare journey and unlock the full potential of your projects:

* Learn more about other [uploading options](/docs/uploading-files/) and [transformation operations](/docs/transformations/image/#image-transformations-list).
* [Migrate](/docs/guides/migro/) your files to Uploadcare if you have already used another solution.
* Implement [secure workflows](/docs/security/) for uploading and delivering files.