Skip to content
Original file line number Diff line number Diff line change
@@ -1,37 +1,40 @@
---
title: Best Angular File Upload Libraries Compared
description: Angular file upload libraries compared - upup, ngx-file-drop, PrimeNG FileUpload, FilePond and Uppy on drag and drop, S3 and resumable uploads.
description: Angular file upload libraries compared - upup, ngx-file-drop, ng2-file-upload, PrimeNG, DevExtreme, FilePond and Uppy on S3, resumable uploads and licensing.
faq:
- q: What is the best file upload library for Angular?
a: For a complete uploader against your own storage, upup or Uppy. Inside a PrimeNG app, PrimeNG FileUpload. For just a drop zone, ngx-file-drop.
a: For a complete uploader against your own storage, upup or Uppy. Inside a PrimeNG or DevExtreme app, that suite's upload component. For just a drop zone, ngx-file-drop, and for an upload queue behind your own markup, ng2-file-upload.
- q: Which Angular upload libraries upload directly to S3?
a: upup, with presigned URLs from your endpoint or @useupup/server, and Uppy, with its AWS S3 plugin. With the others you write the S3 signing and upload code yourself.
- q: Does upup's Angular package include the image editor?
a: No. The image editor ships in @useupup/react and @useupup/preact only. Everything else, including cloud drives, camera, screen capture and resumable uploads, works the same in Angular.
- q: Is upup's Angular component standalone?
a: Yes. UpupUploaderComponent is a standalone component with the selector upup-uploader. Add it to a standalone component's imports, or to an NgModule's imports.
- q: Are these libraries free?
a: Yes. All five are MIT-licensed. FilePond's full image editor, Pintura, is a separate commercial product.
a: Most are. upup, ngx-file-drop, ng2-file-upload, FilePond and Uppy are MIT-licensed. PrimeNG is MIT through version 21; version 22 moved to the PrimeUI License, which is free for individuals and eligible small organizations and paid otherwise. DevExtreme needs a paid per-developer DevExpress license. FilePond's full image editor, Pintura, is a separate commercial product.
---

**The short answer:** for an Angular uploader that sends files straight to your
own S3-compatible bucket, with cloud drives and resumable uploads, use upup or
Uppy. If your app already uses PrimeNG, its FileUpload component is the
smallest step. ngx-file-drop only handles the drop zone, and FilePond gives you
one polished component that posts to your server.
Uppy. If your app already uses PrimeNG or DevExtreme, that suite's upload
component is the smallest step. ngx-file-drop only handles the drop zone,
ng2-file-upload adds an upload queue behind your own markup, and FilePond gives
you one polished component that posts to your server.

This roundup compares five Angular file upload libraries on the features that
This roundup compares seven Angular file upload libraries on the features that
usually decide the choice, then explains how to pick.

## Comparison table

| Library | Drag and drop | Cloud drives | Resumable | Direct-to-S3 | Image editing | License | Bundle approach |
| ------------------ | ------------- | ------------------------------------ | ------------------------------ | ------------------------------------ | -------------------------------------------------------- | ------- | ------------------------------------------- |
| upup | Yes | Google Drive, OneDrive, Dropbox, Box | Yes (tus or S3 multipart) | Yes (presigned URLs) | No (the editor is React/Preact only) | MIT | Headless core + native standalone component |
| ngx-file-drop | Yes | No | No | You build it | No | MIT | One drop-zone component; no upload code |
| PrimeNG FileUpload | Yes | No | No | Not built in (custom upload handler) | No | MIT | Part of the PrimeNG component suite |
| FilePond | Yes | No | Chunked uploads to your server | Not built in | Crop/resize plugins; full editor is Pintura (commercial) | MIT | Vanilla JS core + Angular adapter + plugins |
| Uppy | Yes | Many, via Companion | Yes (tus or S3 multipart) | Yes (AWS S3 plugin) | Yes (Image Editor plugin) | MIT | Modular plugins; install only what you use |
| Library | Drag and drop | Cloud drives | Resumable | Direct-to-S3 | Image editing | License | Bundle approach |
| ----------------------- | ------------- | ------------------------------------ | ------------------------------ | -------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------ | -------------------------------------------------- |
| upup | Yes | Google Drive, OneDrive, Dropbox, Box | Yes (tus or S3 multipart) | Yes (presigned URLs) | No (the editor is React/Preact only) | MIT | Headless core + native standalone component |
| ngx-file-drop | Yes | No | No | You build it | No | MIT | One drop-zone component; no upload code |
| ng2-file-upload | Yes | No | No | Not built in | No | MIT | Two directives + an upload queue; you build the UI |
| PrimeNG FileUpload | Yes | No | No | Not built in (custom upload handler) | No | v22+: PrimeUI License (paid, with a free community tier); v21 and earlier: MIT | Part of the PrimeNG component suite |
| DevExtreme FileUploader | Yes | No | Chunked uploads to your server | Not built in (custom upload functions) | No | Commercial, per developer (30-day trial) | Part of the DevExtreme component suite |
| FilePond | Yes | No | Chunked uploads to your server | Not built in | Crop/resize plugins; full editor is Pintura (commercial) | MIT | Vanilla JS core + Angular adapter + plugins |
| Uppy | Yes | Many, via Companion | Yes (tus or S3 multipart) | Yes (AWS S3 plugin) | Yes (Image Editor plugin) | MIT | Modular plugins; install only what you use |

## The libraries

Expand All @@ -53,12 +56,45 @@ and hands them to your code. It does not upload anything, so you add the HTTP
requests, progress and storage yourself. It is a good fit when you only need
the drop target.

### ng2-file-upload

ng2-file-upload, from Valor Software, pairs an upload queue with two
directives. Its `FileUploader` class holds the queue, per-file progress and
filters such as a maximum size or allowed MIME types, and sends each file with
`XMLHttpRequest` to a URL you set. The `ng2FileSelect` and `ng2FileDrop`
directives connect it to a file input and a drop area; the file list, progress
bars and buttons are your own markup. It can send the raw file instead of a
multipart form (`disableMultipart`), which is what an S3 presigned PUT expects,
but it does not sign URLs, split files into chunks or resume uploads. Since
3.0.0, each major version declares a single Angular major as its peer
dependency (9.x for Angular 20; 10.x, on npm's `next` tag, for Angular 21), so
match the version to your Angular release.

### PrimeNG FileUpload

FileUpload is one component in the PrimeNG suite. It offers a basic button mode
and an advanced mode with a drop zone, file list and progress bar, and it posts
to a URL you give it or hands the files to your own upload handler. It's the
natural choice if PrimeNG is already your component library.
to a URL you give it or hands the files to your own upload handler. PrimeNG 21
and earlier are MIT-licensed. Version 22 moved to PrimeTek's PrimeUI License,
which is free for individuals and eligible small organizations, paid
otherwise, and requires a license key. It's the natural choice if PrimeNG is
already your component library.

### DevExtreme FileUploader

FileUploader (`dx-file-uploader`) is one component in DevExpress's DevExtreme
suite. It shows its own drop area, or you can point `dropZone` at another
element. Its `instantly` and `useButtons` upload modes send files with Ajax
requests to `uploadUrl`, and `useForm` submits them with an HTML form. Setting
`chunkSize` splits files into chunks that your server merges (DevExpress
documents ASP.NET and PHP handlers), and the `uploadFile` and `uploadChunk`
functions replace the built-in requests with your own code. S3, cloud drives
and resuming an interrupted upload are not built in; DevExpress publishes
example projects that implement S3 and Azure Blob uploads with `uploadChunk`.
DevExtreme is commercial: the `devextreme-angular` wrapper is MIT, but the
`devextreme` package it wraps needs a paid per-developer license, with a
30-day trial for evaluation. It's the natural choice if DevExtreme is already
your component library.

### FilePond

Expand All @@ -74,18 +110,31 @@ UI, sources (webcam, screen capture, remote drives through Companion, a server
you host) and destinations such as tus and S3. See
[upup vs Uppy](/docs/comparisons/upup-vs-uppy/).

### Older packages with similar names

Two packages that come up in searches are not compared above. The
`angular-file-uploader` package on npm has had no release since 7.1.1 in
November 2021, and that version declares Angular 10 as its peer dependency.
`ng-file-upload`, whose module is named `ngFileUpload`, is a directive for
AngularJS 1.x, not for current Angular. Its last release, 12.2.13, was in
November 2016, and AngularJS support has officially ended.

## How to choose

- **You want a finished uploader on your own bucket:** upup or Uppy.
- **Your users pick files from Google Drive, OneDrive, Dropbox or Box:** upup
or Uppy. Uppy routes remote files through Companion; upup does it in the
browser (client mode) or in `@useupup/server` (server mode).
- **You already use PrimeNG:** start with PrimeNG FileUpload and switch only if
you need S3, cloud drives or resumable uploads.
- **You already use PrimeNG or DevExtreme:** start with that suite's upload
component and switch only if you need S3, cloud drives or resumable uploads.
- **You only need a drop target:** ngx-file-drop, then write the upload code.
- **You want an upload queue but your own markup:** ng2-file-upload.
- **You need image editing in Angular:** Uppy's Image Editor plugin, or
FilePond's plugins. upup's editor is not available in Angular.
- **You upload very large files:** use resumable uploads, with upup or Uppy.
- **You need permissive licenses throughout:** upup, ngx-file-drop,
ng2-file-upload, FilePond and Uppy are MIT. DevExtreme needs a paid license,
and PrimeNG 22 and later are under the PrimeUI License.

## Minimal upup example

Expand Down Expand Up @@ -124,7 +173,8 @@ ready-to-copy presign handler.
### What is the best file upload library for Angular?

For a complete uploader against your own storage, upup or Uppy. Inside a
PrimeNG app, PrimeNG FileUpload. For just a drop zone, ngx-file-drop.
PrimeNG or DevExtreme app, that suite's upload component. For just a drop zone,
ngx-file-drop, and for an upload queue behind your own markup, ng2-file-upload.

### Which Angular upload libraries upload directly to S3?

Expand All @@ -146,8 +196,11 @@ Yes. `UpupUploaderComponent` is a standalone component with the selector

### Are these libraries free?

Yes. All five are MIT-licensed. FilePond's full image editor, Pintura, is a
separate commercial product.
Most are. upup, ngx-file-drop, ng2-file-upload, FilePond and Uppy are
MIT-licensed. PrimeNG is MIT through version 21; version 22 moved to the
PrimeUI License, which is free for individuals and eligible small organizations
and paid otherwise. DevExtreme needs a paid per-developer DevExpress license.
FilePond's full image editor, Pintura, is a separate commercial product.

## Related comparisons

Expand Down
Loading
Loading