Quick Start

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 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:

1
 <link
2
    rel="stylesheet"
3
    href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.css"
4
    >
5
    <script type="module">
6
      import * as UC from 'https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.js';
7
      UC.defineComponents(UC);
8
    </script>
9
10
    <uc-config
11
      ctx-name="my-uploader"
12
      source-list="local, url, camera, dropbox"
13
      pubkey="YOUR_PUBLIC_KEY"
14
    ></uc-config>
15
16
    <uc-file-uploader-regular
17
      ctx-name="my-uploader"
18
      class="uc-light"
19
    ></uc-file-uploader-regular>

Learn more about other installation options 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.

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.

You can view all uploaded files in the Files section or get a List of files programmatically via REST API.

Get file URL

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

• Programmatically, using uploading widget API and events.

• By enabling webhooks to receive notifications whenever a file is uploaded.

• Using HTML form.

  HTML-form example

  1
  <link
  2
    rel="stylesheet"
  3
    href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.css"
  4
    >
  5
    <script type="module">
  6
      import * as UC from 'https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.js';
  7
      UC.defineComponents(UC);
  8
    </script>
  9
  10
    <uc-config
  11
      ctx-name="my-uploader"
  12
      pubkey="YOUR_PUBLIC_KEY"
  13
    ></uc-config>
  14
  15
    <form>
  16
      <uc-file-uploader-regular
  17
        ctx-name="my-uploader"
  18
      >
  19
        <uc-form-input ctx-name="my-uploader"></uc-form-input>
  20
      </uc-file-uploader-regular>
  21
      <input type="Submit" />
  22
    </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 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 of the Dashboard. This feature works only after with any URL-based transformation, such as the preview operation, 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://ucarecdn.com/:UUID/-/preview/1024x1024/

https://ucarecdn.com/:UUID/ Original image 4554⨯2936 1,3 МB	https://ucarecdn.com/:UUID/-/preview/1024x1024/ Optimized image 1024×660 147 КB

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

1. Connect the script:

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

2. Configure basic settings:

   1
     uc-img {
   2
       --uc-img-pubkey: '$YOUR_PUBLIC_KEY';
   3
       --uc-img-breakpoints: '200, 500, 800';
   4
   }

3. Use <uc-img> tag for the images in your HTML templates:

   1
   <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:

   1
   <style>
   2
     @import url('./test.css');
   3
   4
     uc-img {
   5
       --uc-img-breakpoints: '400, 800, 1200';
   6
     }
   7
   </style>
   8
   9
   <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. 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 it, and make it grayscale:
https://ucarecdn.com/:UUID/-/resize/100x/-/grayscale/

Original image https://ucarecdn.com/:UUID/

Thumbnail -/resize/100x/-/grayscale/