Uploadcare File Uploader

Solutions

We supply a set of ready-made solutions for the most frequent file uploading cases: regular, inline, and minimal. Each with its own set of features and customization options. You can also use them as is or as a custom build reference.

Regular File Uploader

The Regular File Uploader is a dialog-based solution that enables easy integration of an uploading button into your application. The button opens a dialog where users can select files to upload from various sources, including local files, external URLs, or social platforms. Both the button and the dialog can be customized to match your application's look and feel.

Inline File Uploader

The Inline mode is quite similar to the Regular uploader and is useful when you want to upload files without opening a dialog window. This mode is particularly handy if you prefer using your own button and dialog components. The Inline mode can also be useful when you want to embed the file uploader directly within a form or a specific section of your application's user interface. This allows users to seamlessly upload files in context, without being redirected to a separate dialog window, thus enhancing the overall user experience.

Minimal File Uploader

The Minimal uploader is the last, but certainly not the least, type of uploader. It offers a streamlined approach, enabling file uploads without any additional UI elements. The minimalistic uploader functions as a simple drag-and-drop area. However, some features, such as social sources and cloud editor, are unavailable with this uploader type.

Embed image editor

Both Regular and Inline modes include a built-in cloud image editor that provides a few dozen popular image edit operations.

Features

The main feature of the new File Uploader is the ease of customization and localization with basic HTML and CSS.

Add a file uploading capability to your website:

• Receive files from anybody.
• Upload files of any type and up to 5 TB in size.
• Upload multiple files in one go.
• Track upload jobs with an individual progress bar for each file.
• Get files from various sources, including local storage, camera, social media, and cloud storage services.
• Speed up the uploading with the uploading network (it works like CDN).
• Show image previews.
• Resize, crop, rotate, add effects, enhance images, add overlays right after upload.
• Validate files by their format or size.
• Prevent remote code execution through widgets and code execution in uploaded files like SVG, html and xml.

All your uploads go to the storage covered by SLA with a 99.9% uptime. On top of that, Uploadcare infrastructure is compliant with SOC 2, HIPAA, and more.

Supported browsers

File Uploader is supported and tested in all major modern desktop and mobile browsers:

• Chrome
• Firefox
• Safari
• Edge
• Opera

If you need IE support, please use our jQuery widget.

Typescript support

We use JSDoc type annotations for TypeScript static analysis support during development.

Additionally, we provide type definitions (*.d.ts files) for the TypeScript projects in our packages.

Check the JSDoc Reference page in TypeScript official documentation.

Basic types are automatically loaded when you import the package.

To enable JSX support, add the following to your tsconfig.json file:

{
  "compilerOptions": {
    "types": ["@uploadcare/blocks/types/jsx"]
  },
}json

Technology behind

We built the File Uploader as close to the native web platform as possible and do not force you to use any specific development environment tools.

Uploader is built with web components, service workers, wasm, and a set of other modern technologies. Modern ESM-level code sharing. Minimum of external dependencies.

The build stage is unnecessary for development. Use the code directly in any modern browser or Node.js. We encourage you to build your custom solutions with all building blocks that we have.

Fast start

We recommend beginning with the File Uploader configurator. It includes all necessary settings and generates ready-to-use code snippets and step-by-step instructions tailored to your project's environment. If you don't have an account yet, now is the perfect time to get one.

Or start with File Uploader installation.

Accessibility

We are actively working to make the File Uploader accessible to everyone. However, please note that it is not currently fully accessible. We have plans to incorporate support for accessibility features in the near future. If accessibility is critical for your needs, we recommend checking out our previous jQuery widget.

Other uploading widgets

This is our latest file uploading solution. If you're looking for a previous one, please refer to the jQuery widget. In contrast to the previous one, new uploader is 57% lighter, has a modern and highly customizable view, and works with any JavaScript framework, while previous jQuery widget requires additional work.

If you're a mobile developer, check you our Swift and Kotlin integrations:

• iOS uploading widget
• Android uploading widget