An Angular library for implementing desktop file and folder drag-and-drop functionality using HTML5 File API.
ngx-file-drop is an Angular library that enables developers to easily implement drag-and-drop functionality for files and folders in web applications. It abstracts the complexities of the HTML5 File API into a simple Angular component, allowing users to drop files directly from their desktop into the browser. The library handles file system entries, provides event hooks, and supports customization of the drop zone appearance and behavior.
Angular developers building applications that require file upload features, such as content management systems, cloud storage interfaces, or media processing tools. It is particularly useful for projects needing support for both file and folder uploads.
Developers choose ngx-file-drop because it offers a native Angular solution with zero dependencies on rxjs-compat, a clean and declarative API, and robust support for modern browser file APIs. Its focus on simplicity and customization makes it a lightweight alternative to more complex file upload libraries.
Angular 11 file and folder drop library
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Handles both individual files and entire directories, preserving relative paths as demonstrated in the example code for directory entries.
Offers extensive parameters for labels, styling, accepted formats, and conditional behaviors like disabling or single/multiple selection, detailed in the README's parameters table.
Built specifically for Angular with TypeScript integration, exporting typed interfaces like NgxFileDropEntry for seamless development without rxjs-compat dependencies.
Provides lifecycle events such as onFileDrop, onFileOver, and onFileLeave for fine-grained interaction management, as shown in the component usage example.
Relies on HTML5 File API, making it incompatible with Internet Explorer, which is explicitly stated in the README as a limitation.
Only manages the drag-and-drop interface; developers must implement file upload logic themselves, as evidenced by the commented-out upload code in the example.
Requires custom CSS for styling, as the library provides class names but no pre-designed themes or components, forcing additional frontend work.