npm package: @ruc-lib/multi-file-upload
Description: RUC Multifile Upload Component basically allows you to select multiple files at a time. The selected file/files will be visible below with 2 features of submit and delete option.
Latest version: 4.0.0

# ruclib-multi-file-upload

RUC Multifile Upload Component basically allows you to select multiple files at a time. The selected file/files will be visible below with 2 features of submit and delete option.

# Features
 When you submit the file you will get a progressbar view which represents the size of the file and the percentage of the file getting submitted so for this individually each file can be submitted to the api given via the input of the selectors.

Then second option is delete in which if :
 If there is a delete api, then it will delete file from there and if there is no any delete api then it will delete the file from the list.

# Installation guide

# Install complete library

`npm install @uxpractice/ruc-lib`

# Install individual component

If users only need the multi file upload component, they can install it separately

**For Angular 15:**
```bash
npm install @ruc-lib/multi-file-upload@3.2.0 @angular/material@^15.0.0 @angular/cdk@^15.0.0
```

**For Angular 16:**
```bash
npm install @ruc-lib/multi-file-upload@3.2.0 @angular/material@^16.0.0 @angular/cdk@^16.0.0
```

**For Angular 17:**
```bash
npm install @ruc-lib/multi-file-upload@4.0.0 @angular/material@^17.0.0 @angular/cdk@^17.0.0
```

**For Angular 18:**
```bash
npm install @ruc-lib/multi-file-upload@4.0.0 @angular/material@^18.0.0 @angular/cdk@^18.0.0
```

**For Angular 19:**
```bash
npm install @ruc-lib/multi-file-upload@4.0.0 @angular/material@^19.0.0 @angular/cdk@^19.0.0
```

**For Angular 20:**
```bash
npm install @ruc-lib/multi-file-upload@4.0.0
```

> **Note:** When installing in Angular 15-19 apps, you must specify the matching `@angular/material` and `@angular/cdk` versions to avoid peer dependency conflicts. Angular 20 will automatically use the correct versions.

# Version Compatibility

Please ensure you install the correct version of `@ruc-lib/multi-file-upload` based on your Angular version.

| Angular Version    | Compatible `@ruc-lib/multi-file-upload` Version     |
|--------------------|-----------------------------------------------------|
| 15.x.x             | `npm install @ruc-lib/multi-file-upload@^3.2.0`     |
| 16.x.x             | `npm install @ruc-lib/multi-file-upload@^3.2.0`     |
| 17.x.x             | `npm install @ruc-lib/multi-file-upload@^4.0.0`     |
| 18.x.x             | `npm install @ruc-lib/multi-file-upload@^4.0.0`     |
| 19.x.x             | `npm install @ruc-lib/multi-file-upload@^4.0.0`     |
| 20.x.x             | `npm install @ruc-lib/multi-file-upload@^4.0.0`     |


# Usage

# import required modules

for library
`import { RuclibMultiFileUploadModule } from '@uxpractice/ruc-lib/multi-file-upload'`

for seperate package
`import { RuclibMultiFileUploadModule } from '@ruc-lib/multi-file-upload'`

# use component selector

```
<uxp-ruclib-multi-file-upload [rucInputData]="inputObjectDataMultiFileUpload" 
[customTheme]="customTheme" (rucEvent)="passEvent($event)"></uxp-ruclib-multi-file-upload>
```

# Input and Output

# Inputs
rucInputData -> It is the configuration to be passed in the multi-file upload component.

customTheme -> It is the name of the theme.

# Output

rucEvent -> is the event which will be fired when file is uploaded or deleted.

# rucInputData (sample object)

# Detail definition of the each property can be found in type definition file.

```
inputObjectDataMultiFileUpload = {
  multifileSelection: true,
  displayThumbnail: true,
  label: 'Choose File',
  uploadUrl: '/api/upload',
  deleteUrl: '/api/delete',
};
```


# Contribution
Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.

# Acknowledgements
Thank you for choosing the Multi file upload Component Library. If you have any feedback or suggestions, please let us know!

# ruclib-multi-file-upload

A powerful and intuitive multi-file upload component for Angular applications. It allows users to select multiple files, view thumbnails for images, and manage uploads with features like individual submission, deletion, and progress tracking.

## Installation Guide

To use the Multi-File Upload component, you can install the entire RUC library or just this specific component.

### Install the Entire Library
```bash
npm install @uxpractice/ruc-lib
```

### Install Individual Component

If you only need the MultiFileUpload component:

**For Angular 15:**
```bash
npm install @ruc-lib/multi-file-upload@3.1.0 @angular/material@^15.0.0 @angular/cdk@^15.0.0
```

**For Angular 16:**
```bash
npm install @ruc-lib/multi-file-upload@3.1.0 @angular/material@^16.0.0 @angular/cdk@^16.0.0
```

**For Angular 17:**
```bash
npm install @ruc-lib/multi-file-upload@3.1.0 @angular/material@^17.0.0 @angular/cdk@^17.0.0
```

**For Angular 18:**
```bash
npm install @ruc-lib/multi-file-upload@3.1.0 @angular/material@^18.0.0 @angular/cdk@^18.0.0
```

**For Angular 19:**
```bash
npm install @ruc-lib/multi-file-upload@3.1.0 @angular/material@^19.0.0 @angular/cdk@^19.0.0
```

**For Angular 20:**
```bash
npm install @ruc-lib/multi-file-upload@3.1.0
```

> **Note:** When installing in Angular 15-19 apps, you must specify the matching `@angular/material` and `@angular/cdk` versions to avoid peer dependency conflicts. Angular 20 will automatically use the correct versions.

### 📦 Version Compatibility

| Angular Version | Compatible Version | Installation Command |
|-----------------|-------------------|----------------------|
| 15.x.x          | 3.1.0            | See installation instructions above |
| 16.x.x          | 3.1.0            | See installation instructions above |
| 17.x.x          | 3.1.0            | See installation instructions above |
| 18.x.x          | 3.1.0            | See installation instructions above |
| 19.x.x          | 3.1.0            | See installation instructions above |
| 20.x.x          | 3.1.0            | See installation instructions above |


### 📦 Version Compatibility

| Angular Version | Compatible Version | Installation Command |
|-----------------|-------------------|----------------------|
| 15.x.x          | 3.1.0            | See installation instructions above |
| 16.x.x          | 3.1.0            | See installation instructions above |
| 17.x.x          | 3.1.0            | See installation instructions above |
| 18.x.x          | 3.1.0            | See installation instructions above |
| 19.x.x          | 3.1.0            | See installation instructions above |
| 20.x.x          | 3.1.0            | See installation instructions above |


## Usage

### 1. Import the Component
In your Angular component file (e.g., `app.component.ts`), import the `RuclibMultiFileUploadComponent`:

```typescript
import { Component } from '@angular/core';

// For Complete Library
import { RuclibMultiFileUploadComponent } from '@uxpractice/ruc-lib/multi-file-upload';

// For Individual Package
import { RuclibMultiFileUploadComponent } from '@ruc-lib/multi-file-upload';

@Component({
  selector: 'app-root',
  imports: [RuclibMultiFileUploadComponent],
  templateUrl: './app.component.html',
})
export class AppComponent {
  // Component code here
}
```

### 2. Use the Component
In your component's template, use the `<uxp-ruclib-multi-file-upload>` selector and pass the configuration object to the `rucInputData` input.

```html
<uxp-ruclib-multi-file-upload 
  [rucInputData]="inputObjectDataMultiFileUpload" 
  [customTheme]="'custom-theme'"
  (rucEvent)="handleEvent($event)">
</uxp-ruclib-multi-file-upload>
```

## API Reference

### Component Inputs

| Input          | Type                     | Description                                      |
|----------------|--------------------------|--------------------------------------------------|
| `rucInputData` | `MultifiledefaultConfig` | The main configuration object for the component. |
| `customTheme`  | `string`                 | An optional CSS class for custom theming.        |

### Component Outputs

| Output     | Type               | Description                                                                                      |
|------------|--------------------|--------------------------------------------------------------------------------------------------|
| `rucEvent` | `EventEmitter<any>` | Emits an event when a file is selected, uploaded, or deleted. The event object contains `eventName` and `eventOutput`. |

### `MultifiledefaultConfig`
This is the main configuration object for the multi-file-upload component.

| Property           | Type      | Description                                                                                             |
|--------------------|-----------|---------------------------------------------------------------------------------------------------------|
| `multifileSelection` | `boolean` | If `true`, allows multiple files to be selected at once.                                                |
| `displayThumbnail` | `boolean` | If `true`, displays a thumbnail preview for image files (PNG format).                                   |
| `label`            | `string`  | The label for the file selection button.                                                                |
| `uploadUrl`        | `string`  | The URL endpoint for uploading files.                                                                   |
| `deleteUrl`        | `string`  | An optional URL endpoint for deleting files. If not provided, files are only removed from the list.     |

## Example Configuration

Here's an example of how to configure the Multi-File Upload component in your component's TypeScript file.

```typescript
import { Component } from '@angular/core';
import { MultifiledefaultConfig } from '@ruc-lib/multi-file-upload';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  
  inputObjectDataMultiFileUpload: MultifiledefaultConfig = {
    multifileSelection: true,
    displayThumbnail: true,
    label: 'Choose File',
    uploadUrl: '/api/upload',
    deleteUrl: '/api/delete',
  };

  handleEvent(event: any) {
    console.log(event.eventName, event.eventOutput);
  }
}
```

> ⚠️ **IMPORTANT: Custom Theme Usage in Angular Material**

When implementing **custom themes**, such as:

```scss
.custom-theme-1 {
  @include angular-material-theme($custom-theme);
}

// You must also include the typography mixin to ensure text styles are applied correctly as shown below:
.custom-theme-1 {
  @include angular-material-theme($custom-theme);
  @include mat.typography-level($theme-custom-typography-name, body-1);
}
```


## Contribution

Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.

## Acknowledgements

Thank you for choosing the Multi-File Upload Component. If you have any feedback or suggestions, please let us know!