# file-manager-azure-blob-provider

> File manager sample connected to storage through an Azure Blob provider.

**Framework:** angular  **Component:** FileManager  **Variant:** azure-blob-provider

## 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-azure-blob-provider.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-azure-blob-provider/azure-service.component.ts

```typescript
import { Component, ViewEncapsulation } from '@angular/core';
import { FileManagerComponent, NavigationPaneService, ToolbarService, DetailsViewService, FileManagerModule } from '@syncfusion/ej2-angular-filemanager';
/**
 * File Manager sample with azure service
 */
@Component({
    selector: 'control-content',
    templateUrl: 'azure-service.html',
    encapsulation: ViewEncapsulation.None,
    providers: [NavigationPaneService, ToolbarService, DetailsViewService],
    standalone: true,
    imports: [FileManagerModule]
})

export class AzureController {
    public ajaxSettings!: object;
    public toolbarSettings!: object;
    public contextMenuSettings!: object;
    public hostUrl: string = 'https://azure-service.syncfusion.com/';
    public ngOnInit(): void {
        this.ajaxSettings = {
            url: this.hostUrl + 'api/AzureFileManager/AzureFileOperations',
            getImageUrl: this.hostUrl + 'api/AzureFileManager/AzureGetImage',
            uploadUrl: this.hostUrl + 'api/AzureFileManager/AzureUpload',
            downloadUrl: this.hostUrl + 'api/AzureFileManager/AzureDownload'
        };
        this.toolbarSettings = { items: ['NewFolder', 'SortBy', 'Cut', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Rename', 'Selection', 'View', 'Details',] };
        this.contextMenuSettings = {
            file: [ 'Cut', 'Copy', '|', 'Delete', 'Download', 'Rename', '|', 'Details'],
            layout: ['SortBy', 'View', 'Refresh', '|', 'Paste', '|', 'NewFolder', '|', 'Details', '|', 'SelectAll'],
            visible: true
        }
    }
}

```

### src/components/file-manager-azure-blob-provider/azure-service.html

```html
<div class="sample-container">
       <ejs-filemanager id='overview' [ajaxSettings]='ajaxSettings' [toolbarSettings]="toolbarSettings" [contextMenuSettings]="contextMenuSettings">
        </ejs-filemanager>
</div>

```