Adds a drag and drop area to upload files to ACS.


Basic Usage

<adf-upload-drag-area (success)="onSuccess($event)">
    <div style="width: 200px; height: 100px; border: 1px solid #888888">
        DRAG HERE
export class AppComponent {

    public onSuccess(event: Object): void {
        console.log('File uploaded');



You can supply any content in the <adf-upload-drag-area> to display as the drag/drop target:

<adf-upload-drag-area (success)="onSuccess($event)">
    <div style="width: 200px; height: 100px; border: 1px solid #888888">
        DRAG HERE

Class members


NameTypeDefault valueDescription
acceptedFilesTypestring"*"Filter for accepted file types.
commentstringWhen you overwrite existing content, you can use the comment field to add a version comment that appears in the version history
disabledbooleanfalseToggles component disabled state (if there is no node permission checking).
majorVersionbooleanfalsemajorVersion boolean field to true to indicate a major version should be created.
maxFilesSizenumberSets a limit on the maximum size (in bytes) of a file to be uploaded. Has no effect if undefined.
nodeTypestring"cm:content"Custom node type for uploaded file
rootFolderIdstring"-root-"The ID of the root. Use the nodeId for Content Services or the taskId/processId for Process Services.
versioningbooleanfalseToggles versioning.


beginUploadEventEmitter<UploadFilesEvent>Emitted when the upload begins.
errorEventEmitter<FileUploadErrorEvent>Emitted when an error occurs.
successEventEmitter<any>Emitted when the file is uploaded successfully.
updateFileVersionEventEmitter<CustomEvent<any>>Emitted when dropping a file over another file to update the version.


Intercepting uploads

You can intercept the upload process using the beginUpload event.

The event has a type of UploadFilesEvent and provides the following APIs:

  • files: accesses the FileInfo objects that are prepared for the upload
  • pauseUpload: pauses the upload and performs additional tasks, like showing the confirmation dialog
  • resumeUpload: resumes the upload process


Wire the beginUpload event at the template level:

<adf-upload-drag-area (beginUpload)="onBeginUpload($event)" ...>

Create the onBeginUpload handler that invokes a confirmation dialog:

import { UploadFilesEvent, ConfirmDialogComponent } from '@alfresco/adf-content-services';

class MyComponent {

    onBeginUpload(event: UploadFilesEvent) {
        const files = event.files || [];

        if (files.length > 1) {

            const dialogRef =, {
                data: {
                    title: 'Upload',
                    message: `Are you sure you want to upload ${files.length} file(s)?`
                minWidth: '250px'

            dialogRef.afterClosed().subscribe(result => {
                if (result === true) {


The example above shows a confirmation dialog every time a user uploads more than 1 file. This could be either a selection of 2 or more files, or a folder with multiple entries.

See also

© 2023 Alfresco Software, Inc. All Rights Reserved.