Drag And Drop File

The DragAndDropFileComponent is a flexible Angular component for file uploads, offering drag-and-drop functionality, support for remote media fetching, and customizable configurations like file type, size limits, and tooltips. It simplifies file selection and processing with real-time previews and event-driven outputs.

How to use the component in your app :

1. import the component :

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

1. The selector for component , like it :

<lib-cms-drag-and-drop-file></lib-cms-drag-and-drop-file>

Inputs

Input	Type	Description
configuration	DragAndDropConfiguration	Configuration object that defines file size and any other custom settings for the drag-and-drop area.
media	Media	An optional media object, useful for previewing or displaying selected media (e.g., images or videos)

This is the options in DragAndDropConfiguration type:

{
  label?: string;
  tooltip?: string;
  required?: boolean;
  maxFileSize?: number;
  accept?: string;
  editable?: boolean;
}

This is the options in Media type:

{
  path?: string;
  name?: string;
  mediaUrl?: string;
}

Outputs

Output	Type	Description
filesSelected	EventEmitter<File>	Emits the selected file(s) when the user selects a file either via drag-and-drop or through file input.

Methods

1. ngOnInit()

• Description:

  • Initializes the component, sets up configuration, and prepares the drag-and-drop area for file selection.

2. maxFileSize

• Description:

  • Returns the maximum allowed file size for uploads. If not specified in the configuration, it defaults to 10 MB.

• • Parameters: None

  • Returns: number (maximum file size in bytes)

3. accept

• Description:

  • Returns a comma-separated string of accepted MIME types for file uploads. If no types are specified in the configuration, it defaults to pdf and image types.

• Parameters: None

• Returns: string (MIME types)

4. tooltip

• Description:

  • Returns the custom tooltip text that can be displayed when hovering over the file input area. It is undefined if not configured.

• Parameters: None

• Returns: string | undefined (Tooltip text or undefined)

5. checkFileInput()

• Description:

  • This method is called on initialization to check whether there is a media URL and file path. If both are available, it fetches the media file and updates the component with the selected file.

• Parameters: None

• Returns: void

6. selectFile(file: File)

• Description:

  • This method is used to select a file, either from the media fetched URL or when a file is manually picked by the user.

• Parameters:

  • file: File - The file to be selected.

• Returns: void