UI Components Library

Overview

This Angular library provides reusable UI components, including buttons, cards, and a feature-rich file upload component. Designed to be compatible with multiple Angular versions, it offers seamless integration into your projects.

Installation

To install the library from npm, use the following command:

npm install @dhaivat-cloud/upload-component-library --legacy-peer-deps

Make sure to include the library in your Angular project as needed.

Available Components

1. Button Component

A simple button component for general UI interactions.

<lib-button label="Click Me"></lib-button>

2. Card Component

A reusable card component for displaying content in a structured layout.

<lib-card>
  <h3>Card Title</h3>
  <p>Card content goes here.</p>
</lib-card>

3. File Upload Component

The file upload component provides an intuitive way to select, upload, and download files.

Importing the Component

If using standalone components, import it directly:

import { FileUploadComponent } from '@dhaivat-cloud/upload-component-library';

If using Angular modules:

import { UiComponentsModule } from '@dhaivat-cloud/upload-component-library';

Usage

<lib-file-upload></lib-file-upload>

Features:

• Select multiple files
• Upload files to a server
• Handle duplicate files
• Download successfully uploaded files

Example Implementation

Component:

@Component({
  selector: 'app-root',
  template: '<lib-file-upload></lib-file-upload>',
})
export class AppComponent {}

File Upload UI:

<div class="upload-container">
    <h2>File Upload</h2>
    <input type="file" (change)="onFileSelected($event)" multiple />
    <button (click)="uploadFiles()" [disabled]="selectedFiles.length === 0">
      Upload Selected Files
    </button>
    <h3>Uploaded Files</h3>
    <ul>
      <li *ngFor="let file of uploadedFiles">
        {{ file.name }} ({{ file.size | number }} bytes) - 
        <span [ngClass]="{ 'success': file.status === 'success', 'failed': file.status === 'failed', 'duplicate': file.status === 'duplicate' }">
          {{ file.status === 'duplicate' ? 'Duplicate (Already Exists)' : file.status }}
        </span>
        <button *ngIf="file.status === 'success'" (click)="downloadFile(file.name)">
          Download
        </button>
      </li>
    </ul>
</div>

Styling:

.upload-container {
  border: 1px solid #ccc;
  padding: 20px;
  max-width: 400px;
}
.success {
  color: green;
}
.failed {
  color: red;
}

License

This project is licensed under the MIT License.

Contributing

Contributions are welcome! Feel free to submit issues or pull requests.

Support

For any issues or feature requests, please open an issue on GitHub.