Ng File Upload

ng-file-upload is an Angular directive for handling multipart file uploads and drag-and-drop selection within Angular applications. It functions as a client-side tool for validating file attributes, processing images, and generating media previews before transmission to a server.

The project includes a client-side image processor for resizing, center-cropping, and correcting JPEG EXIF orientation. It also features a browser-based media previewer for images, audio, and video files, and an HTML5 File API shim to provide upload and reader functionality for legacy browsers.

Additional capabilities include the ability to attach metadata to uploads, monitor real-time upload progress, and validate file properties such as size, type, and image dimensions. The system supports selecting files via standard inputs or designated drop zones.

Features

File Uploads - Handles the transmission of files to remote endpoints using multipart form data and binary streams.

Angular Integrations - Provides an Angular directive for handling multipart file uploads with metadata and progress tracking.

Dropzone File Uploads - Implements a drag-and-drop upload area with integrated previews, validation, and progress feedback.

Media Selection Previews - Provides real-time visual or audio previews of images, audio, and video files during the selection process.

HTTP File Uploads - Enables the transmission of single or multiple files to remote server endpoints via HTTP requests.

Upload Progress Tracking - Monitors the number of bytes sent via XMLHttpRequest to calculate real-time upload percentages.

Upload Logic Bindings - Binds upload logic to DOM elements via an Angular directive to manage file input and drag-and-drop events.

File Previewers - Generates thumbnails and data-URL previews for media files to show the user before upload.

Drag-and-Drop File Upload - Allows users to select files by dragging them from the local system into a designated drop zone.

Local Media Previews - Generates temporary local URLs or base64 strings from file blobs to display media content before upload.

Client-Side File Validations - Validates file types, sizes, and dimensions in the browser before initiating an upload.

Multipart Uploads - Encodes files and metadata into multipart/form-data bodies for server-side processing.

Multipart Form Uploads - Send a file to a server endpoint along with key-value data pairs to provide context for the upload.

Chunked Uploaders - Splits large files into smaller segments for more reliable transmission to the server.

Client-Side Image Editing - Implements browser-based image resizing and EXIF orientation correction before transmission.

Image Processing - Provides native tools to resize, center-crop, and correct JPEG EXIF orientation for images.

Orientation Correction Utilities - Automatically adjusts image rotation and aspect ratio by reading embedded EXIF metadata.

Media File Validations - Checks files against criteria including type, size, image dimensions, aspect ratio, and media duration.

Image Transformation Utilities - Implements utilities for resizing, rotating, and cropping images before they are uploaded or displayed.

In-Browser Media Previews - Provides a utility for rendering thumbnails and data-URL previews of media files directly in the browser.

Upload State Bindings - Links UI elements to the upload lifecycle to track progress and manage transfer cancellation.

Request Metadata Attachment - Attaches custom text fields and metadata to file upload requests for server-side context.

danialfaridng-file-upload

Features

Star history