Welcome to the Alfresco Builder Network

Our technical resource site is still being improved. We'd love to hear your feedback. Tell us what you think

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

Contents

Basic Usage

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

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

}

Transclusions

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
    </div>
</adf-upload-drag-area>

Class members

Properties

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.

Events

NameTypeDescription
beginUploadEventEmitter<UploadFilesEvent>Emitted when the upload begins.
errorEventEmitter<Object>Emitted when an error occurs.
successEventEmitter<Object>Emitted when the file is uploaded successfully.

Details

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

Example

Wire the beginUpload event at the template level:

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

Create the onBeginUpload handler that invokes a confirmation dialog:

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

@Component({...})
class MyComponent {

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

        if (files.length > 1) {
            event.pauseUpload();

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

            dialogRef.afterClosed().subscribe(result => {
                if (result === true) {
                    event.resumeUpload();
                }
            });
        }
    }

}

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

Interested in trying Alfresco?

Try Now