Why is ID null in Ajax calls in the File Manager?

Question

In the File Manager in Blazor, there are 2 different ways to do data binding: https://blazor.syncfusion.com/documentation/file-manager/data-binding. I'm trying to use the `Id` property. It works fine in the `List objects` data binding, but not in the `AjaxSettings` data binding.

Here's a small example where I have a couple of events in the `List objects` approach:

<SfFileManager
    TValue="FileManagerDirectoryContent">
    <FileManagerEvents
        TValue="FileManagerDirectoryContent"
        OnRead="OnRead"
        ItemsUploaded="ItemsUploaded"
        ItemsUploading="ItemsUploading"/>
</SfFileManager>

@code {
    private async Task OnRead(ReadEventArgs<FileManagerDirectoryContent> args)
    {
        ...
        var cwd = new FileManagerDirectoryContent
        {
            Name = folderNode.Name,
            Type = "File Folder",
            FilterPath = parentPath ?? "/",
            Size = 0,
            IsFile = false,
            HasChild = childNodes.Count != 0,
            Id = folderNode.Id.ToString(),
            DateModified = folderNode.ModifiedDateTime.ToLocalTime(),
            DateCreated = folderNode.CreatedDateTime.ToLocalTime(),
            ParentId = folderNode.ParentId.ToString() ?? "",
        };
        var files = childNodes
            .Select(item => new FileManagerDirectoryContent
            {
                Name = item.Name,
                Type = item.Type switch
                {
                    FileHubNodeEnum.Folder or FileHubNodeEnum.Root => "Directory",
                    FileHubNodeEnum.File => Path.GetExtension(item.Name),
                    _ => throw new InvalidDataException("Unknown file type"),
                },
                IsFile = item.Type is FileHubNodeEnum.File,
                Size =  item.SizeInBytes,
                HasChild = item.HasChildern,
                FilterPath = displayPath,
                DateModified = item.ModifiedDateTime.ToLocalTime(),
                DateCreated = item.CreatedDateTime.ToLocalTime(),
                Permission = GetActualPermissions(item.EffectivePermissions),
                Id = item.Id.ToString(),
                ParentId = folderNode.Id.ToString(),
            })
            .ToList();
        return new FileManagerResponse<FileManagerDirectoryContent>
        {
            CWD = cwd,
            Files = files,
            Error = null!,
        };
    }
}

The important point to note here is that I am populating the `Id` and `ParentId` properties.

Then when I'm uploading a file, this method gets triggered:

    private async Task ItemsUploading(ItemsUploadEventArgs<FileManagerDirectoryContent> args)
    {
        ...
    }

And if I put a breakpoint here and look at `args`, it looks like this:

args = ItemsUploadEventArgs<FileManagerDirectoryContent>
 Cancel = {bool} false
 CustomData = {Dictionary<string, object>} null
 Folder = FileManagerDirectoryContent
  Action = {string} null
  CaseSensitive = {bool} false
  Data = {FileManagerDirectoryContent[]} null
  DateCreated = {DateTime} 2025-04-22 15:38:42
  DateModified = {DateTime} 2025-04-22 15:38:42
  FilterId = {string} null
  FilterPath = {string} "/"
  HasChild = {bool} true
  Id = {string} "1031"
  IsFile = {bool} false
  Name = {string} "/"
  Names = {string[]} null
  NewName = {string} null
  ParentId = {string} ""
  Path = {string} null
  Permission = AccessPermission
  PreviousName = {string} null
  RenameFiles = {string[]} null
  SearchString = {string} null
  ShowHiddenItems = {bool} false
  Size = {long} 0
  TargetData = {FileManagerDirectoryContent} null
  TargetPath = {string} null
  Type = {string} "File Folder"
 Path = {string} "/"

Note that the property `Id` has a value.

But if I change, and do the `AjaxSettings` approach instead, then `Id` is set to null when the upload happens. Here's a small example of the file manager:

<SfFileManager
    TValue="FileManagerDirectoryContent">
    <FileManagerEvents
        TValue="FileManagerDirectoryContent"
        OnSend="OnSend"/>
    <FileManagerAjaxSettings Url="@_fileManagerUrl"
                             UploadUrl="@_fileManagerUploadUrl"
                             DownloadUrl="@_fileManagerDownloadUrl"
                             GetImageUrl="@_fileManagerGetImageUrl"/>
</SfFileManager>

And then in my controller I have:

    [HttpPost("AzureUpload")]
    public ActionResult AzureUpload(FileManagerDirectoryContent args)
    {
        ...
    }

If I set a breakpoint inside of it and look at `args`, it looks like this:

args = FileManagerDirectoryContent
 Action = {string} "save"
 CaseSensitive = {bool} false
 Data = {FileManagerDirectoryContent[]} FileManagerDirectoryContent[0]
 DateCreated = {DateTime} 0001-01-01 00:00:00
 DateModified = {DateTime} 0001-01-01 00:00:00
 FilterId = {string} null
 FilterPath = {string} null
 HasChild = {bool} false
 Id = {string} null
 IsFile = {bool} false
 Name = {string} null
 Names = {string[]} null
 NewName = {string} null
 ParentId = {string} null
 Path = {string} "/"
 Permission = {AccessPermission} null
 PreviousName = {string} null
 RenameFiles = {string[]} null
 SearchString = {string} null
 ShowFileExtension = {bool} false
 ShowHiddenItems = {bool} false
 Size = {long} 571384
 TargetData = {FileManagerDirectoryContent} null
 TargetPath = {string} null
 Type = {string} null
 UploadFiles = {List<IFormFile>} Count = 1
  [0] = FormFile
   ContentDisposition = {string} "form-data; name="uploadFiles"; filename="Test.webp""
   ContentType = {string} "image/webp"
   FileName = {string} "Test.webp"
   Headers = {HeaderDictionary} Count = 2
   Length = {long} 571384
   Name = {string} "uploadFiles"

Note that `Id` and `ParentId` are null now. Even though I'm giving them values in my controller in the response to the `read` action in the same way as in the `List objects` approach.

In general when I have experimented, it seems like `Id` and `ParentId` aren't really supported in `AjaxSettings`. It seems like it's often that they don't have any values when the actions in the controller gets called. Is that a bug? And is that something that you are able to reproduce and fix? It would be great if those properties worked in `AjaxSettings` in the same way as in `List objects`.

LeoLavanya Dhanaraj · Answer

Hi Daniel,Greetings
from Syncfusion support. Based
on the provided details, we understand that you have a query regarding the
difference in obtaining the Folder args value in the ItemsUploading event for a list of objects and the
AJAX settings. We would like to inform you that in the context of a list of
objects, the FileManager can be populated with local data that includes a list
of objects with ParentId mappings. To render the root-level folder, we need to
specify the ParentID and Id details for the local list object (all data is
customized or created from the application or user end). Therefore, to indicate
the root folder and its folder structure, we pass the Id and ParentId values to the Folder args(gets the folder details within
which the file or folder is to be uploaded) in the ItemsUploading event for the
list of objects.You can find a demo of the list of
objects (which can retrieve the folder values) at the following link: https://blazor.syncfusion.com/demos/file-manager/flat-data?theme=fluentRegarding the AJAX settings and the
injected services, we perform file operations using filterPath and filterId
(for path-based and ID-based providers). This is not a bug; it is the current
behavior of our component. Is there a specific need for retrieving values from
the event arguments in the AJAX settings? Could you please share your exact use
case for these values? This information will help us validate your query and
provide a suitable solution based on your needs.Regards,Leo Lavanya Dhanaraj

Daniel Jonsson · Answer

Hi Leo,I would like to use `FilterPath` as the visible path for files and folders in the file manager. But under the hood, I would like to have IDs for all files and folders. I'm storing my files and folders in a database with IDs being their key. So when looking up a file or a folder in the database, it's much easier if I can get it by its ID. That's why I would like to set IDs on them in the file manager.But you are mentioning `FilterId`. I haven't tried that property. Can it be used in "Ajax Settings", as opposed to "Id" and "ParentId" which don't seem to work in "Ajax Settings"?Are the "Id" and "ParentId" properties only usable in "Flat Data" but not in "Ajax Settings? Is this documented somewhere what properties are usable in "Ajax Settings" and in "Flat Data"? It seems like they support different sets of properties.Thanks,Daniel

Saravanan Jayavel · Answer

Hi
Daniel Jonsson,Thank
you for explaining your use case.Based
on your requirement to manage files and folders using unique IDs internally
while presenting user-friendly, path-style names in the FileManager UI, the SQL
Database File System Provider is the most suitable solutionThe
SQL Database provider is designed for ID-based file management:All
files and folders are stored in a SQL database with unique identifiers (IDs).
This allows you to efficiently perform backend operations such as lookup,
rename, delete, or move using these IDs — which is more reliable and performant
than relying on path strings.Although
the backend operates with IDs, the FileManager component can still display
readable folder and file names in the UI using FilterPath. This ensures a
smooth and intuitive experience for end users while maintaining robust backend
structure.For
your reference we attached sample.Sample
:
Attached as a Zip FileYou
can refer to our official documentation for detailed steps on how to configure
and use the SQL Database File System Provider :https://blazor.syncfusion.com/documentation/file-manager/sql-database-file-system-providerCheck
out the sample and provider and let me know if you need any further assistance.Regards,Saravanan
JAttachment: BlazorApp1_902e3f30.zip