📦 UploadUtilsUi

npm install upload-utils-ui

UploadUtilsUi is a reusable Angular component library designed to simplify file upload functionality within Angular applications. It includes ready-to-use UI components, event handling, and integration options to help developers implement upload features quickly and cleanly.

✅ Built with Angular CLI version 18.2.0

✨ Features

• 📤 Upload files using a customizable upload component
• 🎯 Emits events on completion for backend integration
• 🧱 Easy to plug into any Angular app or enterprise project
• ⚙️ CLI-friendly for component generation and scaffolding

🧩 Upload Component: BatchUploadManager

This component allows users to select and upload a file to a specified backend API. It emits an event upon successful upload so you can trigger any follow-up logic (like toast notifications or API syncing).

✅ Basic Usage

Add the component to your template:

<batch-upload-manager
  titleHeader="Upload"
  [uploadUrl]="'https://api.escuelajs.co/api/v1/files/upload'"
  (eventCompleted)="completed($event)">
</batch-upload-manager>

completed(event: any): void {
  console.log('Upload Completed:', event);
  // You can perform additional actions here
}


📥 Component Inputs
Input	    Type	Required	Description
titleHeader	string	✅ Yes	   The title displayed above the upload UI
uploadUrl	string	✅ Yes	   The backend endpoint URL to which files are uploaded

📤 Component Outputs
Output	        Type	Description
eventCompleted	any	    Emits when file upload is successfully completed

import { UploadUtilsUiModule } from 'upload-utils-ui';

@NgModule({
  imports: [
    UploadUtilsUiModule
  ]
})
export class AppModule { }

🎨 Global Styles Setup To apply the default styles used by the components (like layout, spacing, buttons, etc.), import the shared SCSS file into your Angular app’s global style file:

Option 1: For apps using SCSS\n In your src/styles.scss or src/styles.sass, add:\n ## @import '../node_modules/upload-utils-ui/src/lib/styles/global.common.scss';\n 📌 Make sure the path is correct relative to your root styles.scss file. You can also configure a style path\nalias in angular.json for cleaner imports.

Option 2: If using Angular CLI style preprocessor options\n You can also add this style in the angular.json file under the styles array:\n "styles": [ "src/styles.scss", "node_modules/upload-utils-ui/src/lib/styles/global.common.scss" ]\n This will ensure styles are globally available without needing to import in every component.