Angular Base64 Upload

screenshot of Angular Base64 Upload
angular

Converts files from file input into base64 encoded models.

Overview

The angular-base64-upload is a convenient directive designed to seamlessly convert files from a file input into base64 encoded models. This directive is particularly beneficial for developers using Angular version 1.2.0 or higher, offering a simple, efficient way to handle file uploads without the hassle of complex file processing logic. With a focus on user experience, this directive allows for multiple file selections and includes various validation settings to suit different file handling needs.

What sets this directive apart is its flexibility and customization potential. Whether you need to enforce size limits, manage file types, or implement your own parsing logic, angular-base64-upload provides the tools necessary to tailor the file upload process to your application's specific requirements.

Features

  • Multiple File Selection: Easily allows users to select multiple files at once by adding a multiple attribute to the input element, creating an array of base64 file objects.

  • File Size Validation: Set maximum and minimum file size limits in kilobytes (KB) for uploads when multi-select is enabled, ensuring that only appropriate file sizes are processed.

  • Count Validation: Define the maximum and minimum number of files a user can select, providing control over the upload process for multi-file handling.

  • Accept Attribute: Customize acceptable file types with the input file accept attribute, such as setting parameters for image, video, or audio files.

  • Oversize Prevention: Use the do-not-parse-if-oversize option to prevent large files from causing browser issues, maintaining smooth performance during file uploads.

  • Custom Parsing Logic: Implement your unique parsing functionality before files are added to the model, allowing for advanced features like auto-resizing images or adding custom attributes.

  • FileReader Events: Attach event handlers to track various FileReader events such as load progress and errors, enhancing your application's ability to respond to user actions effectively.

  • Alternative onChange Binding: Provide an alternative way to manage file input changes with on-change, overcoming limitations of Angular’s ng-change directive with file inputs.

angular
Angular

Angular is a TypeScript-based open-source framework by Google for building dynamic single-page applications and cross-platform mobile apps with MVC architecture and a rich set of features.

gulp
Gulp

Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.