Quick start

When building a website or an app, you’ll need to handle uploading, storing, processing, and delivering various files, either from you, or from your users. We have various uploading methods, a few storage options, an API to manage files, and a CDN with on-the-fly processing capabilities. Everything is compliant with numerous international regulations.

In this quickstart we’ll show you our File Uploader and image processing operations. We will also cover the rest of our features at the end of this article.

Step 1. Uploading

Installation and configuration

You can either install File Uploader from CDN, or via NPM.

1
npm i @uploadcare/file-uploader

1
import * as UC from '@uploadcare/file-uploader';
2
3
UC.defineComponents(UC);

File Uploader can be presented in a few ways, e.g. regularly, inline or minimalistic.

Regular File Uploader:

1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@v1/web/uc-file-uploader-regular.min.css">
2
3
<uc-config
4
  ctx-name="my-uploader"
5
  pubkey="YOUR_PUBLIC_KEY"
6
></uc-config>
7
<uc-file-uploader-regular
8
  ctx-name="my-uploader"
9
></uc-file-uploader-regular>

Where uc-config is a configuration block, and uc-file-uploader-regular is a File Uploader block. ctx-name attribute is used to wire up the configuration block with the File Uploader block. To dive further, check out configuration guide.

Here you can find examples how to integrate it into your stack of choice:

• React
• Angular
• Vue

Step 2. Storage & CDN

Once a file is uploaded, it goes to your Uploadcare storage and instantly becomes available on CDN.

https://ucarecdn.com/85b5644f-e692-4855-9db0-8c5a83096e25/
https://ucarecdn.com/:uuid/

(By default, Upload API doesn’t store the files forever. There is a 24-hour window when you should decide whether to store uploaded files or not. But all of our official libraries, including File Uploader, inherit the auto-store setting from your project, where it’s set to ON by default. You can read more about storage behavior).

You can get the UUID of the uploaded files immediately on upload. For example:

1
<uc-upload-ctx-provider ctx-name="my-uploader"></uc-upload-ctx-provider>
2
3
<script>
4
    const ctx = document.querySelector('uc-upload-ctx-provider')
5
    ctx.addEventListener('file-upload-success', e => {
6
        console.log(e.detail)
7
    })
8
</script>

Please refer to the Events page to view the complete list of available events.

We recommend saving UUIDs instead of CDN URLs because this will let you process these files easier later on.

Step 3. Processing

You can add image processing operations by including directives in the CDN URL:

https://ucarecdn.com/85b5644f-e692-4855-9db0-8c5a83096e25/-/preview/640x640/image.jpg
https://ucarecdn.com/:uuid/-/:operation/:params/:filename

Imagine you’re building a service with a lot of street photos:

• You’ll need to optimize the size and quality of the images for page load time.
• You’ll have to blur the faces on the photos to comply with privacy laws.
• You’ll want to add your watermark to every picture.

Construct the value of the image src attribute template, adding the operations you pick, and use this template for every street photo in your project:

https://ucarecdn.com/0e679e26-781b-4a66-b760-b2125f8c862c/
           -/resize/1200x/
           -/blur_region/faces/
           -/overlay/2f44b1c2-f71a-4f84-bbe2-6d96c7e35a2d/100p,100p/

See the full list of image processing operations.

More features

• Lear more about uploading files options.
• Integrate Uploadcare into your mobile app with native SDKs.
• Implement secure workflows for uploading and delivering files.
• Fetch and deliver remote files without explicitly uploading files.
• Add arbitrary metadata, remove image background, recognize objects, process videos, convert documents, and detect viruses.
• Explore project settings.
• Migrate your files to Uploadcare.