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:

npm install @ruc-lib/[email protected] @angular/material@^15.0.0 @angular/cdk@^15.0.0

For Angular 16:

npm install @ruc-lib/[email protected] @angular/material@^16.0.0 @angular/cdk@^16.0.0

For Angular 17:

npm install @ruc-lib/[email protected] @angular/material@^17.0.0 @angular/cdk@^17.0.0

For Angular 18:

npm install @ruc-lib/[email protected] @angular/material@^18.0.0 @angular/cdk@^18.0.0

For Angular 19:

npm install @ruc-lib/[email protected] @angular/material@^19.0.0 @angular/cdk@^19.0.0

For Angular 20:

npm install @ruc-lib/[email protected]

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

npm install @uxpractice/ruc-lib

Install Individual Component

If you only need the MultiFileUpload component:

For Angular 15:

npm install @ruc-lib/[email protected] @angular/material@^15.0.0 @angular/cdk@^15.0.0

For Angular 16:

npm install @ruc-lib/[email protected] @angular/material@^16.0.0 @angular/cdk@^16.0.0

For Angular 17:

npm install @ruc-lib/[email protected] @angular/material@^17.0.0 @angular/cdk@^17.0.0

For Angular 18:

npm install @ruc-lib/[email protected] @angular/material@^18.0.0 @angular/cdk@^18.0.0

For Angular 19:

npm install @ruc-lib/[email protected] @angular/material@^19.0.0 @angular/cdk@^19.0.0

For Angular 20:

npm install @ruc-lib/[email protected]

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:

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.

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

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:

.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!