@talenra/components documentation
  1. Components
  2. UploadComponent

File

upload/src/upload/upload.component.ts

Description

Upload component provides a drop area and file selection dialog to pick files for upload. It also displays a list of selected files along with their upload status, file name and size.

Upload component allows controlling accepted file types, maximum number of files, maximum file size and maximum overall upload size. It also provides user feedback through warning messages when files are rejected due to validation failures.

Use UploadService to access/manage the list of selected files and to update their upload status.

Example :
@Component({
  template: `<talenra-upload />`,
  imports: [UploadComponent],
  providers: [{ provide: UploadService, useClass: UploadService }]
  ...
})
export class ConfigurableUploadComponent {
  private uploadService: UploadService = inject(UploadService);
  ...
}

Import

Example :
import { UploadComponent } from '@talenra/components/upload';

See UploadService See IUploadItem See UploadState See IUploadMessages

../../../#/upload

Metadata

changeDetection ChangeDetectionStrategy.OnPush
host {
}
selector talenra-upload
imports FileListComponent IconComponent
templateUrl ./upload.component.html
styleUrl ./upload.component.scss

Index

Inputs

Inputs

accept
Type : string | undefined
Default value : undefined

Accepted file types. Note that this restriction is not enforced by the browser. Browsers typically apply this restriction in the file selection dialog by filtering for the accepted types. However, users can still select files of other types in some browsers by changing the file type filter in the dialog or by dragging files.

Even if we cannot prevent users from selecting files of unaccepted types, we show a validation message for such files.

The value for accept is a comma-separated list of MIME types and/or category wildcards. If omitted, all file types are accepted.

Example :
<talenra-upload accept="image/*, application/pdf" />
<talenra-upload accept="application/pdf" />
customMessages
Type : Partial<IUploadMessages>

Custom messages/translations will override default messages provided via localize. Use this feature if your app involves multiple instances of Upload using different messages per instance. If all Upload instances of your app share the same messages, you should provide/customize messages via localization instead.

Custom messages can be translated using the $localize tag function (cmp. example below).

Example :
protected customMessages: IUploadMessages = {
  dropOrBrowseFiles: $localize`:Upload showcase|Custom message "drop or browse files":My custom message`,
};
Example :
<talenra-upload ... [customMessages]="customMessages" />
disabled
Type : boolean, unknown
Default value : false, { transform: booleanAttribute }

Determines whether the upload is disabled by the consuming app. Note that disabled state might be enforced by internal conditions as well (e.g., when maximum number of files is reached).

Example :
<talenra-upload disabled />
<talenra-upload [disabled]="isUploadDisabled()" />
dropAreaIcon
Type : string
Default value : 'upload-file'

Name of the icon to display in upload's drop area. Expects a valid icon name as used in IconComponent.

Example :
<talenra-upload dropAreaIcon="document-pdf" />
hideFileList
Type : boolean, unknown
Default value : false, { transform: booleanAttribute }

Hides the file list below the drop area. Typically used when custom file list implementation is desired.

Example :
<talenra-upload hideFileList />
maxFiles
Type : number, unknown
Default value : MAX_FILES_DEFAULT

Maximum number of files to be uploaded.

Example :
<talenra-upload maxFiles="2" />
maxFileSize
Type : number, unknown
Default value : Infinity

Maximum file size (in bytes) allowed per selected file. Default is Infinity (no size limit).

Example :
<talenra-upload maxFileSize="5242880" /> <!-- 5 MB -->
<talenra-upload [maxFileSize]="10 * 1024 * 1024" /> <!-- 10 MB -->
maxUploadSize
Type : number, unknown
Default value : Infinity

Maximum upload size (in bytes) allowed for all selected files cumulated. A user message is displayed for files exceeding this size. Default is Infinity (no size limit).

Example :
<talenra-upload maxUploadSize="20971520" /> <!-- 20 MB -->
<talenra-upload [maxUploadSize]="50 * 1024 * 1024" /> <!-- 50 MB -->
unit
Type : TMemorySize | undefined

Unit used in file listing for file sizes. If omitted, the most appropriate unit is used.

Example :
<talenra-upload unit="KB" />
<talenra-upload [unit]="MemorySize.KB" />

results matching ""

    No results matching ""