import React from 'react';
import { FileManagerComponent, Inject, DetailsView, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager';
import '@syncfusion/ej2-base/styles/material.css';
import '@syncfusion/ej2-icons/styles/material.css';
import '@syncfusion/ej2-inputs/styles/material.css';
import '@syncfusion/ej2-popups/styles/material.css';
import '@syncfusion/ej2-buttons/styles/material.css';
import '@syncfusion/ej2-splitbuttons/styles/material.css';
import '@syncfusion/ej2-navigations/styles/material.css';
import '@syncfusion/ej2-layouts/styles/material.css';
import '@syncfusion/ej2-grids/styles/material.css';
import '@syncfusion/ej2-react-filemanager/styles/material.css';

function App() {
  const hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";

  return (
    <div>
      <FileManagerComponent
        id="file"
        ajaxSettings={{
          url: hostUrl + "api/FileManager/FileOperations",
          getImageUrl: hostUrl + "api/FileManager/GetImage",
          uploadUrl: hostUrl + "api/FileManager/Upload",
          downloadUrl: hostUrl + "api/FileManager/Download"
        }}
        view="Details"
        height="375px"
      >
        <Inject services={[DetailsView, NavigationPane, Toolbar]} />
      </FileManagerComponent>
    </div>
  );
}

export default App;

import React from 'react';
import { FileManagerComponent, Inject, DetailsView, NavigationPane, Toolbar } from '@syncfusion/ej2-react-filemanager';
import '@syncfusion/ej2-react-filemanager/styles/material.css';

export default function BasicFileManager() {
  return (
    <FileManagerComponent
      id="file"
      ajaxSettings={{
        url: "https://api.example.com/api/FileManager/FileOperations",
        getImageUrl: "https://api.example.com/api/FileManager/GetImage",
        uploadUrl: "https://api.example.com/api/FileManager/Upload",
        downloadUrl: "https://api.example.com/api/FileManager/Download"
      }}
      view="Details"
      height="500px"
    >
      <Inject services={[DetailsView, NavigationPane, Toolbar]} />
    </FileManagerComponent>
  );
}

ajaxSettings={{
  url: "https://api.example.com/api/FileManager/FileOperations",
  getImageUrl: "https://api.example.com/api/FileManager/GetImage",
  uploadUrl: "https://api.example.com/api/FileManager/Upload",
  downloadUrl: "https://api.example.com/api/FileManager/Download"
}}

[ApiController]
[Route("api/[controller]")]
public class FileManagerController : ControllerBase
{
    [HttpPost("FileOperations")]
    public IActionResult FileOperations(
        [FromForm] string action,
        [FromForm] string path,
        [FromForm] string name = null,
        [FromForm] IFormFile uploadFiles = null)
    {
        switch (action)
        {
            case "read":
                // Return files and folders at given path
                return Ok(new { files = GetDirectoryContents(path) });
            case "create":
                // Create new folder
                Directory.CreateDirectory(Path.Combine(path, name));
                return Ok();
            case "delete":
                // Delete files/folders
                return Ok();
            case "rename":
                // Rename file/folder
                return Ok();
            case "move":
                // Move or copy files
                return Ok();
            default:
                return BadRequest("Invalid action");
        }
    }

    [HttpGet("GetImage")]
    public IActionResult GetImage([FromQuery] string path)
    {
        // Return thumbnail or image file
        var filePath = ResolvePath(path);
        return PhysicalFile(filePath, "image/jpeg");
    }

    [HttpPost("Upload")]
    public IActionResult Upload([FromForm] IFormFile uploadFiles, [FromForm] string path)
    {
        // Handle file upload
        var filePath = Path.Combine(path, uploadFiles.FileName);
        using (var stream = new FileStream(filePath, FileMode.Create))
        {
            uploadFiles.CopyTo(stream);
        }
        return Ok();
    }

    [HttpGet("Download")]
    public IActionResult Download([FromQuery] string path)
    {
        // Return file for download
        var file = System.IO.File.ReadAllBytes(path);
        var fileName = Path.GetFileName(path);
        return File(file, "application/octet-stream", fileName);
    }
}

import React, { useRef, useState } from 'react';

export default function FileManagerWithState() {
  const fileManagerRef = useRef(null);
  const [selectedFiles, setSelectedFiles] = useState([]);
  const [currentPath, setCurrentPath] = useState('/');

  const handleFileSelect = (args) => {
    setSelectedFiles(args.fileDetails);
  };

  const handleCreateFolder = () => {
    fileManagerRef.current?.createFolder('NewFolder');
  };

  const handleDeleteSelected = () => {
    const ids = selectedFiles.map(f => f.name);
    fileManagerRef.current?.deleteFiles(ids);
  };

  return (
    <div>
      <div className="toolbar">
        <button onClick={handleCreateFolder}>Create Folder</button>
        <button onClick={handleDeleteSelected} disabled={!selectedFiles.length}>
          Delete ({selectedFiles.length})
        </button>
        <span>Path: {currentPath}</span>
      </div>
      <FileManagerComponent
        ref={fileManagerRef}
        fileSelect={handleFileSelect}
        ajaxSettings={{...}}
        height="400px"
      >
        <Inject services={[DetailsView, NavigationPane, Toolbar]} />
      </FileManagerComponent>
    </div>
  );
}

<FileManagerComponent
  // Prevent deletion of certain files
  beforeDelete={(args) => {
    if (args.fileDetails[0].name.startsWith('.')) {
      args.cancel = true;
      alert('Cannot delete system files');
    }
  }}
  
  // Add headers to AJAX requests
  beforeSend={(args) => {
    args.headers = { ...args.headers, 'Authorization': `Bearer ${token}` };
  }}
  
  // Validate before upload
  uploadListCreate={(args) => {
    args.fileDetails.forEach(file => {
      if (file.size > 5000000) { // 5MB limit
        args.cancel = true;
      }
    });
  }}
  
  // Track successful operations
  success={(args) => {
    console.log('Operation successful:', args.action, args.result);
  }}
  
  // Handle errors
  failure={(args) => {
    console.error('Operation failed:', args.error);
  }}
/>

<FileManagerComponent
  // Customize toolbar
  toolbarSettings={{
    items: ['NewFolder', 'Upload', '|', 'Cut', 'Copy', 'Paste', '|', 'Delete', 'Download'],
    visible: true
  }}
  
  // Customize context menu
  contextMenuSettings={{
    file: ['Open', '|', 'Cut', 'Copy', '|', 'Delete', 'Rename', '|', 'Details'],
    folder: ['Open', '|', 'Cut', 'Copy', 'Paste', '|', 'Delete', 'Rename'],
    layout: ['SortBy', 'View', 'Refresh', '|', 'NewFolder', 'Upload'],
    visible: true
  }}
  
  // Customize columns in details view
  detailsViewSettings={{
    columns: [
      {
        field: 'name',
        headerText: 'Name',
        minWidth: 120,
        template: '<span class="custom-name">${name}</span>'
      },
      {
        field: '_fm_modified',
        headerText: 'Modified',
        type: 'dateTime',
        format: 'MMMM dd, yyyy HH:mm',
        minWidth: 120
      },
      {
        field: 'size',
        headerText: 'Size',
        minWidth: 90,
        template: '<span>${size}</span>'
      }
    ]
  }}
  
  // Customize navigation pane
  navigationPaneSettings={{
    maxWidth: '650px',
    minWidth: '240px',
    visible: true,
    sortOrder: 'None'
  }}
/>

<FileManagerComponent
  // Enable virtualization for large datasets
  enableVirtualization={true}
  
  // Enable persistence to maintain state
  enablePersistence={true}
  
  // Configure search settings
  searchSettings={{
    allowSearchOnTyping: true,
    filterType: 'contains',
    ignoreCase: true
  }}
  
  // Configure upload settings
  uploadSettings={{
    autoUpload: true,
    minFileSize: 0,
    maxFileSize: 30000000, // 30MB
    allowedExtensions: '.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx',
    autoClose: false,
    directoryUpload: false,
    sequentialUpload: false
  }}
  
  // Sort optimization
  sortBy="name"
  sortOrder="Ascending"
/>

ajaxSettings={{
  url: "https://api.example.com/api/FileManager/FileOperations",     // Main CRUD endpoint (required)
  getImageUrl: "https://api.example.com/api/FileManager/GetImage",   // Thumbnail retrieval
  uploadUrl: "https://api.example.com/api/FileManager/Upload",       // File upload endpoint
  downloadUrl: "https://api.example.com/api/FileManager/Download",   // File download endpoint
  // Optional: Add custom headers
  // headers: { 'Authorization': 'Bearer token' }
}}