# file-manager-azure-blob-provider

> File manager that connects to Azure Blob storage as its file backend service.

**Framework:** react  **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/react/js/file-manager-azure-blob-provider.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-react-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/FileManager.jsx

```jsx
import { FileManagerComponent, Inject, NavigationPane, DetailsView, Toolbar } from '@syncfusion/ej2-react-filemanager';
/**
 * File Manager sample with azure service
 */
const Azure = () => {
    let hostUrl = "https://azure-service.syncfusion.com/";
    return (<div>
            <div className="control-section">
                <FileManagerComponent id="azure-file" ajaxSettings={{ url: hostUrl + 'api/AzureFileManager/AzureFileOperations', getImageUrl: hostUrl + 'api/AzureFileManager/AzureGetImage', uploadUrl: hostUrl + 'api/AzureFileManager/AzureUpload', downloadUrl: hostUrl + 'api/AzureFileManager/AzureDownload' }} toolbarSettings={{ items: ['NewFolder', 'SortBy', 'Cut', 'Copy', 'Paste', 'Delete', 'Refresh', 'Download', 'Rename', 'Selection', 'View', 'Details'] }} contextMenuSettings={{ file: ['Cut', 'Copy', '|', 'Delete', 'Download', 'Rename', '|', 'Details'], layout: ['SortBy', 'View', 'Refresh', '|', 'Paste', '|', 'NewFolder', '|', 'Details', '|', 'SelectAll'], visible: true }}>
                    <Inject services={[NavigationPane, DetailsView, Toolbar]}/>
                </FileManagerComponent>
            </div>
        </div>);
};
export default Azure;
```