# 📦 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](https://github.com/angular/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:

```html
<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.