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 features. We will also cover the rest of our features at the end of this article.
Step 1. Uploading
Install File Uploader:
npm install uploadcare-widget --savebash
Add the widget to your page (find your public key in dashboard):
<input type="hidden" role="uploadcare-uploader" data-public-key="demopublickey" data-tabs="file camera url facebook gdrive gphotos" />html
You should be able to see the File Uploader button appear on the page:
Learn more about all uploading methods here. We also have React and Angular integrations.
Step 2. Storage & CDN
Once a file is uploaded, it goes to your Uploadcare storage and instantly becomes available on CDN.
(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 here).
You can get the UUID of the uploaded file immediately on upload. For example:
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:
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/ -/quality/smart/ -/format/auto/ -/blur_region/faces/ -/overlay/2f44b1c2-f71a-4f84-bbe2-6d96c7e35a2d/100p,100p/
See the full list of image processing features here.
- Use CDN features without explicitly uploading files to Uploadcare via Proxy.
- Use Adaptive delivery to automatically adapt images to user context.
- Use REST API to manage file metadata, remove image background, recognize objects, process videos, convert documents, and detect viruses.
- Implement secure workflows with signed uploads, URLs, and webhooks.
- Explore project settings.
- Integrate Uploadcare into your mobile app with native SDKs.
- Migrate your files to Uploadcare.