Document Upload

If you need a more complex document upload, you can use the BfmDocumentUploadContainerComponent as a building block to create your own document upload.

BfmDocumentUploadContainerComponent

This section describes the BfmDocumentUploadContainerComponent component.

Usage

To use the BfmDocumentUploadContainerComponent, you need to import it in your module and use it in your template.

document-upload-container.component.ts

import { BfmDocumentUploadContainerComponent } from "@celerofinancas/ui-files";

@Component({
  standalone: true,
  selector: 'app-document-upload-container',
  imports: [BfmDocumentUploadContainerComponent],
  templateUrl: './document-upload-container.component.html',
})
export class DocumentUploadContainerComponent {}

Then, in your template, you can use the component like this:

document-upload-container.component.html

<bfm-document-upload-container
  [companyPk]="companyPk"
  [document]="document"
  [icon]="icon"
  [isCertificate]="isCertificate"
  [label]="label"
  [loading]="loading"
  [validExtensions]="validExtensions"
  [validMimeTypes]="validMimeTypes"
  (fileDeleted)="fileDeleted.emit($event)"
  (uploadOutput)="uploadOutput.emit($event)"
/>

Inputs

The BfmDocumentUploadContainerComponent component has the following inputs:

companyPk

Company's primary key

• Type: string

document

Document to be uploaded

• Type: UploadedDocument

icon

info

The icons should follow the cds-icons pattern.

To better understand how to use it, please refer to the Icons documentation.

A optional icon to be displayed.

• Type: string

isCertificate

Whether the file being uploaded is a certificate

• Type: boolean

label

Upload input label

• Type: string
• Default value: ''

loading

Whether the component is in loading state

• Type: boolean

validExtensions

Accepted file extensions

• Type: string[]
• Default value : ['.png', '.jpg', '.jpeg', '.pdf']

validMimeTypes

Accepted file types

• Type: string[]
• Default value: ['image/png', 'image/jpeg', 'application/pdf']

Events

The BfmDocumentUploadContainerComponent component emits the following events:

fileDeleted

Emits when the uploaded has been removed by the user

• Type: EventEmitter

uploadOutput

Upload output event emitter

• Type: EventEmitter

Methods

The BfmDocumentUploadContainerComponent component has the following methods:

clear()

Clear values

• Returns: void

uploadFile(eventValue: any)

Validate and upload a file

Parameters :

Name	Type	Optional	Description
eventValue	any	No	Upload output object

• Returns: void