Upload Image

The UploadImageComponent is a simple Angular component for uploading and previewing images. It allows users to select an image file, emits the selected file for further processing, and displays a preview of the image. This component is ideal for use cases such as profile picture uploads or image attachments in forms.

How to use the component in your app :

1. import the component :

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

1. The selector for component , like it :

<lib-cms-upload-image></lib-cms-upload-image>

Features

1. Image Upload:

   • Allows users to upload an image file through an input element.

2. Real-Time Image Preview:

   • Displays a preview of the selected image file using FileReader.

3. Event-Driven:

   • Emits the selected image file through the imageChanged output for further processing.

4. Disabled State:

   • Supports disabling the input field to prevent user interaction when required.

5. Custom Configuration:

   • Accepts an ImageConfiguration input for additional customization.

Inputs

Input	Type	Description	Default Value
configuration	ImageConfiguration	Defines additional configuration for image upload behavior (e.g., file type restrictions).	-
disabled	boolean	Disables the input field when set to true, preventing user interaction.	false

This is the options in ImageConfiguration type:

{
  path?: string;
  type?: "rounded" | "circle";
  width?: string;
  height?: string;
}

Outputs

Output	Type	Description
imageChanged	EventEmitter<File>	Emits the selected image file whenever a new file is uploaded.

For example:

//Define the ImageConfiguration
imageConfig: ImageConfiguration = {
 path: 'https://example.com/images/sample.jpg',// Preloaded image path
  type: 'rounded',// Rounded corners
  width: '150px',// Set the width of the image
  height: '150px',// Set the height of the image
};

html

<cms-upload-image
  [configuration]="imageConfig"
  [disabled]="isDisabled">
</cms-upload-image>

Methods

1. onFileSelected(event: any): void

• Description:

  • Handles the file selection event from the input element.

  • Emits the selected image file through the imageChanged output.

  • Generates a base64 preview of the image file for display.

• Parameters:

  • event: The file selection event containing the file details.