Upload Drag Area Component

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

Contents

• Basic Usage
  • Transclusions
• Class members
  • Properties
  • Events
• Details
  • Intercepting uploads
  • Example
• See also

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

Events

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

• File uploading dialog component
• Upload button component
• File upload error pipe