Upload File

The UploadFileComponent is a versatile Angular component designed to handle file uploads. It supports advanced features like automatic file upload, preloading media files, and integration with the PrimeNG FileUpload component. This component is ideal for applications requiring customizable and dynamic file upload functionality.

How to use the component in your app :

1. import the component :

import {UploadFileComponent} from '@tradinos/cms-frontend-form';

1. The selector for component , like it :

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

Features

1. Advanced and Basic Modes:

   • Supports multiple modes ('advanced' or 'basic') to control the file upload UI.

2. Preload Media:

   • Automatically loads preconfigured media files into the upload list.

3. Event-Driven Updates:

   • Emits events (filesChanged) whenever files are added, removed, or updated.

4. Customizable UI:

   • Allows custom icons, styles, and configurations for the file upload interface.

5. Multiple File Support:

   • Handles single or multiple file uploads based on the configuration.multiple property.

6. Automatic Uploads:

   • Automatically uploads files when auto is enabled.

7. Dynamic Updates:

   • Reactively updates the upload list and emits changes on file selection or removal.

Inputs

Input	Type	Description	Default Value
mode	FileUpload['mode']	Specifies the upload mode ('advanced' or 'basic').	'advanced'
configuration	FileConfiguration	Defines the file upload behavior (e.g., multiple files, restrictions).	-
styleClass	FileUpload['styleClass']	Custom CSS class for styling the file upload component.	-
chooseIcon	string	Custom icon for the "Choose File" button.	-
auto	boolean	Enables automatic upload when set to true.	false
loading	boolean | null	Indicates whether the component is currently in a loading state, typically used to show loading indicators.	false
media	Media[]	Array of preloaded media files to initialize in the file upload list.	[]

This is the options in FileConfiguration type:

{
  accept: string;//the files's type e.g: image, pdf ...
  label: string;
  multiple?: boolean;//if you want to allow multiple files,set it to true
  maxCount?: number;//the max number of files
  maxFileSize?: number;//the max size of file 
  styleClass?: FileUpload["styleClass"]; 
  auto?: boolean;//when enabled, upload begins automatically after selection is completed.
                //default false
}

Outputs

Output	Type	Description
filesChanged	EventEmitter<File | File[] | null>	This output emits whenever the file list changes, whether files are added, removed, or updated

The emitted value can be:

• A single file if multiple is false in the configuration.

• An array of files if multiple is true.

• null if the file list is empty.

For example:

//Define the Configuration
FileConfiguration = {
  multiple: true,//Allow multiple files
  maxFileSize: 10 * 1024 * 1024,//Max file size: 10 MB
  auto: true,//Enable automatic uploads
  accept: 'image/*',//Accept only image files
}; 
//Preload Media Files
preloadedMedia: Media[] = [
  {
    path: 'sample.jpg',
    mediaUrl: 'https://example.com/files',
    name: 'sample.jpg',
  },
];
//Handle the filesChanged Event
handleFilesChanged(files: File | File[] | null): void {
  //add your logic
}

html

<cms-upload-file
  [mode]="'advanced'"
  [configuration]="fileUploadConfig"
  [media]="preloadedMedia"
  (filesChanged)="handleFilesChanged($event)">
</cms-upload-file>

Methods

1. ngAfterViewInit()

• Description:

  • Lifecycle hook that checks for preloaded media files and processes them after the component view is initialized.

• Parameters: None.

• Returns: void.

2. checkFileInput(): Promise<void>

• Description:

  • Loads media files specified in the media input and converts them into file objects for display in the file upload list.

• Parameters: None.

3. updateFileUploadFiles()

• Description:

  • Updates the PrimeNG FileUpload component with the selected files and triggers change detection.

• Parameters: None.

4. onSelect()

• Description:

  • Handles the selection of new files and emits the updated file list through the filesChanged output.

• Parameters: None.

5. onRemove()

• Description:

  • Handles the removal of files and emits the updated file list through the filesChanged output.

• Parameters: None.

6. emitChanges()

• Description:

  • Emits the updated file list or a single file (based on the multiple configuration) through the filesChanged output.

  • Clears the file upload list if auto upload is enabled.

• Parameters: None.