# file-manager-file-upload

> File manager sample demonstrating file uploads through the toolbar and upload dialog.

**Framework:** angular  **Component:** FileManager  **Variant:** file-upload

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/angular/file-manager-file-upload.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-angular-filemanager
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/file-manager-file-upload/file-upload.component.ts

```typescript
import { Component, ViewChild, ViewEncapsulation, Inject } from '@angular/core';
import { UploaderComponent, UploaderModule } from '@syncfusion/ej2-angular-inputs';
import { DialogComponent, DialogModule } from '@syncfusion/ej2-angular-popups';
import { FileManagerComponent, FileOpenEventArgs, FileManagerModule } from '@syncfusion/ej2-angular-filemanager';
import { EmitType } from '@syncfusion/ej2-base';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

/**
 * File Manager real time use case sample
 */
@Component({
    selector: 'control-content',
    templateUrl: 'file-upload.html',
    styleUrls: ['file-upload.css'],
    encapsulation: ViewEncapsulation.None,
    standalone: true,
    imports: [UploaderModule, ButtonModule, DialogModule, FileManagerModule]
})

export class FileUploadController {
    @ViewChild('uploadObj')
    public uploadObj!: UploaderComponent;
    @ViewChild('dialogObj')
    public dialogObj!: DialogComponent;
    @ViewChild('filemanagerObj')
    public filemanagerObj!: FileManagerComponent;
    public dialogHeader = 'Select a file';
    public animationSettings: Object = { effect: 'None' };
    public showCloseIcon = true;
    public target = '#target';
    public visible = false;
    public dialogWidth = '850px';
    public ajaxSettings!: object;
    public contextMenuSettings!: object;
    public toolbarSettings!: object;
    public hostUrl = 'https://physical-service.syncfusion.com/';

    public btnClick: EmitType<object> = () => {
        this.dialogObj.show();
        this.dialogOpen();
        this.filemanagerObj.path = '/';
        this.filemanagerObj.selectedItems = [];
        this.filemanagerObj.refresh();
    }

    // Uploader will be hidden, if Dialog is opened
    public dialogOpen: EmitType<object> = () => {
        document.getElementById('uploadFileManager')!.style.display = 'none';
    }
    // Uploader will be shown, if Dialog is closed
    public dialogClose: EmitType<object> = () => {
        document.getElementById('uploadFileManager')!.style.display = 'block';
    }

    // File Manager's fileOpen event function
    public onFileOpen(args: FileOpenEventArgs): void {
        let file = (args as any).fileDetails;
        if (file.isFile) {
            args.cancel = true;
            if (file.size <= 0 ) { file.size = 10000; }
            this.uploadObj.files = [{name: file.name, size: file.size, type: file.type }];
            this.dialogObj.hide();
        }
    }

    public ngOnInit(): void {
        if (document.querySelector('.sb-demo-section')) {
          document.querySelector('.sb-demo-section')!.classList.add('upload-dialog');
        }
        this.ajaxSettings = {
            url: this.hostUrl + 'api/FileManager/FileOperations',
            getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
            uploadUrl: this.hostUrl + 'api/FileManager/Upload',
            downloadUrl: this.hostUrl + 'api/FileManager/Download'
        };
        this.toolbarSettings = {
            items: ['NewFolder', 'Upload', 'Delete', 'Cut', 'Copy', 'Rename', 'SortBy', 'Refresh', 'Selection', 'View', 'Details']
        };
        this.contextMenuSettings = {
            file: [ 'Cut', 'Copy', '|', 'Delete', 'Download', 'Rename', '|', 'Details'],
            visible: true
        };
    }

    public ngOnDestroy(): void {
        if (document.querySelector('.sb-demo-section') && document.querySelector('.sb-demo-section')!.classList.contains('upload-dialog')) {
            document.querySelector('.sb-demo-section')!.classList.remove('upload-dialog');
        }
    }

}

```

### src/components/file-manager-file-upload/file-upload.css

```css
.upload-dialog {
    height: 550px !important;
}
.sample-container {
    margin: 10px 10px 10px 10px;
}

.fileupload {
    max-width: 500px;
    margin: auto;
}

#openBtn {
    position: absolute;
    top: 18px;
    left: 43%;
}

#dialog {
    top: 20px !important;
    max-height: 500px !important;
}

#uploadFileManager .e-file-drop, #uploadFileManager .e-css.e-btn {
    display: none;
}

.tailwind #openBtn,
.tailwind-dark #openBtn {
    top: 18px;
}

.bootstrap #openBtn,
.bootstrap-dark #openBtn {
    top: 20px;
}

.bootstrap5 #openBtn,
.bootstrap5-dark #openBtn {
    top: 16px;
}
 
 .ej2-new #openBtn {
   top: 148px;
 }

  @media (max-width: 768px) {
    .ej2-new #openBtn {
     top: 274px !important;
     left: 35%;
    }
  }

.fileupload .e-file-select-wrap {
    padding: 20px 0 20px 20px;
}

```

### src/components/file-manager-file-upload/file-upload.html

```html
<div class="sample-container">
    <div id='uploadFileManager' class="fileupload">
        <ejs-uploader #uploadObj id='defaultfileupload'></ejs-uploader>
        <button ejs-button id='openBtn' (click)="btnClick()">File Browser</button>
    </div>
    <div id='target' class="control-section">
        <ejs-dialog #dialogObj id='dialog' [visible]='visible' [header]='dialogHeader' [animationSettings]='animationSettings' [showCloseIcon]='showCloseIcon' (open)="dialogOpen()" (close)="dialogClose()" 
            [target]='target' [width]='dialogWidth'>
            <ejs-filemanager #filemanagerObj id='filemanager' [ajaxSettings]='ajaxSettings' [toolbarSettings]='toolbarSettings' [contextMenuSettings]='contextMenuSettings' [allowMultiSelection]='false' (fileOpen)="onFileOpen($event)">
            </ejs-filemanager>
        </ejs-dialog>
    </div>
</div>

```