@anguless/angulux/fileupload

fileupload

2 declarations2 demos

import

import { FileUploadModule } from '@anguless/angulux/fileupload';

Basic

Basic mode is a single choose control; customUpload hands the files to your own code instead of posting them.

Choose a file

No file chosen

<agl-fileUpload mode="basic" chooseLabel="Choose a file" accept="image/*" [maxFileSize]="1000000" [customUpload]="true" (uploadHandler)="onUpload($event)" /><span>{{ chosen() }}</span>

Advanced

The full control adds drag and drop, a file list and progress.

Choose

Drag and drop files here to upload.

<div style="width: 100%">    <agl-fileUpload [multiple]="true" accept="image/*" [maxFileSize]="1000000" [customUpload]="true" (uploadHandler)="onUpload($event)">        <ng-template #empty>            <p>Drag and drop files here to upload.</p>        </ng-template>    </agl-fileUpload></div>

API

Generated from the committed corpus, which check:corpus holds to the built library.

FileContent

component[aglFileContent]

Input	Type	Default
files	any	not documented
badgeSeverity	'secondary' \| 'info' \| 'success' \| 'warn' \| 'danger' \| 'contrast'	not documented
badgeValue	string	not documented
previewWidth	number	not documented
fileRemoveIconTemplate	any	not documented

Output	Type	Description
onRemove	any

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.

FileUpload

componentagl-fileupload, agl-fileUpload

FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.

Input	Type	Default	Description
name	string \| undefined	not documented	Name of the request parameter to identify the files at backend.
url	string \| undefined	not documented	Remote url to upload the files.
method	'post' \| 'put' \| undefined	not documented	HTTP method to send the files to the url such as "post" and "put".
multiple	boolean \| undefined	not documented	Used to select multiple files at once from file dialog.
accept	string \| undefined	not documented	Comma-separated list of pattern to restrict the allowed file types. Can be any combination of either the MIME types (such as "image/*") or the file extensions (such as ".jpg").
disabled	boolean \| undefined	not documented	Disables the upload functionality.
auto	boolean \| undefined	not documented	When enabled, upload begins automatically after selection is completed.
withCredentials	boolean \| undefined	not documented	Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.
maxFileSize	number \| undefined	not documented	Maximum file size allowed in bytes.
invalidFileSizeMessageSummary	string	not documented	Summary message of the invalid file size.
invalidFileSizeMessageDetail	string	not documented	Detail message of the invalid file size.
invalidFileTypeMessageSummary	string	not documented	Summary message of the invalid file type.
invalidFileTypeMessageDetail	string	not documented	Detail message of the invalid file type.
invalidFileLimitMessageDetail	string	not documented	Detail message of the invalid file type.
invalidFileLimitMessageSummary	string	not documented	Summary message of the invalid file type.
style	{ [klass: string]: any } \| null \| undefined	not documented	Inline style of the element.
styleClass	string \| undefined	not documented	Class of the element.
previewWidth	number	not documented	Width of the image thumbnail in pixels.
chooseLabel	string \| undefined	not documented	Label of the choose button. Defaults to AnguluxConfig Locale configuration.
uploadLabel	string \| undefined	not documented	Label of the upload button. Defaults to AnguluxConfig Locale configuration.
cancelLabel	string \| undefined	not documented	Label of the cancel button. Defaults to AnguluxConfig Locale configuration.
chooseIcon	string \| undefined	not documented	Icon of the choose button.
uploadIcon	string \| undefined	not documented	Icon of the upload button.
cancelIcon	string \| undefined	not documented	Icon of the cancel button.
showUploadButton	boolean	not documented	Whether to show the upload button.
showCancelButton	boolean	not documented	Whether to show the cancel button.
mode	'advanced' \| 'basic' \| undefined	not documented	Defines the UI of the component.
headers	HttpHeaders \| undefined	not documented	HttpHeaders class represents the header configuration options for an HTTP request.
customUpload	boolean \| undefined	not documented	Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to AnguluxConfig Locale configuration.
fileLimit	number \| undefined	not documented	Maximum number of files that can be uploaded.
uploadStyleClass	string \| undefined	not documented	Style class of the upload button.
cancelStyleClass	string \| undefined	not documented	Style class of the cancel button.
removeStyleClass	string \| undefined	not documented	Style class of the remove button.
chooseStyleClass	string \| undefined	not documented	Style class of the choose button.
chooseButtonProps	ButtonProps	not documented	Used to pass all properties of the ButtonProps to the choose button inside the component.
uploadButtonProps	ButtonProps	not documented	Used to pass all properties of the ButtonProps to the upload button inside the component.
cancelButtonProps	ButtonProps	not documented	Used to pass all properties of the ButtonProps to the cancel button inside the component.
files		not documented

Output	Type	Description
onBeforeUpload	EventEmitter<FileBeforeUploadEvent>	Callback to invoke before file upload is initialized.
onSend	EventEmitter<FileSendEvent>	An event indicating that the request was sent to the server. Useful when a request may be retried multiple times, to distinguish between retries on the final event stream.
onUpload	EventEmitter<FileUploadEvent>	Callback to invoke when file upload is complete.
onError	EventEmitter<FileUploadErrorEvent>	Callback to invoke if file upload fails.
onClear	EventEmitter<Event>	Callback to invoke when files in queue are removed without uploading using clear all button.
onRemove	EventEmitter<FileRemoveEvent>	Callback to invoke when a file is removed without uploading using clear button of a file.
onSelect	EventEmitter<FileSelectEvent>	Callback to invoke when files are selected.
onProgress	EventEmitter<FileProgressEvent>	Callback to invoke when files are being uploaded.
uploadHandler	EventEmitter<FileUploadHandlerEvent>	Callback to invoke in custom upload mode to upload the files manually.
onImageError	EventEmitter<Event>	This event is triggered if an error occurs while loading an image file.
onRemoveUploadedFile	EventEmitter<RemoveUploadedFileEvent>	This event is triggered if an error occurs while loading an image file.

Template slot	Description
<ng-template #file>	Custom file template.
<ng-template #header>	Custom header template.
<ng-template #content>	Custom content template.
<ng-template #toolbar>	Custom toolbar template.
<ng-template #chooseicon>	Custom choose icon template.
<ng-template #filelabel>	Custom file label template.
<ng-template #uploadicon>	Custom upload icon template.
<ng-template #cancelicon>	Custom cancel icon template.
<ng-template #empty>	Custom empty state template.

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.