After an example of an in-memory File Manager example - Blazor

[tyeth]

I want to create a typescript/JS/blazor example, basically something entirely web-based and run in the browser (no online storage).
I load a file system from a device using web-serial, then decode that binary blob to a FAT / SpiffFS/LittleFS file system and now wish to have a file browser using the syncfusion javascript tools.

Could someone give me pointers on how to handle an in-memory file system. For the sake of argument you could instead just fetch (using ajax) and extract a zip (to an in-memory store) and pretend that was my file system. Then use the file manager component to view that zip data including image preview like your sample project shows.

I don't really care if I get to do this in blazor (wasm/client side) or just pure JS/typescript.
I've not started on the interface, although it's an extension of this embedded device reading site for programming and reading flash partitions from Espressif ESP32 based microcontrollers: https://github.com/tyeth/read-partitions-esptool-js/tree/readCurrentPartitions

[tyeth]

I did find that the filemanager can take a json array of entries for the file system, instead of having a server backed file service over ajax.

[PrasanthMadhaiyan]

I did find that the filemanager can take a json array of entries for the file system, instead of having a server backed file service over ajax.

Hi Tyeth,

Query 1: FileManager with flat data.

The FileManager uses a flat data object, an array of JavaScript objects, for rendering, eliminating the need to define the ajaxSettings URL. To load folder data as an array of JavaScript objects, use the File Manager control’s fileSystemData property.

To learn more about it we have attached the demo, documentation.

Demo: https://ej2.syncfusion.com/demos/#/tailwind3/file-manager/flat-data.html

Documentation: https://ej2.syncfusion.com/javascript/documentation/file-manager/flat-data

Query 2: FileManager with local physical service provider.

The physical file system provider allows the FileManager control to manage files and folders. It provides methods for performing various file actions such as creating a new folder, copying and moving files or folders, and deleting, uploading, and downloading files or folders in the file system. To work with the physical file system provider, clone the project attached below.

https://github.com/SyncfusionExamples/ej2-aspcore-file-provider

After cloning, open the project in Visual Studio and restore the NuGet packages. Then, set the root directory of the physical file system in the FileManager controller.

Once the root directory is set, build and run the project. The project will be hosted at http://localhost:{port}. Finally, map the ajaxSettings property of the File Manager control to the appropriate controller methods to manage files in the physical file system.

For your reference, we have attached the sample, Physical provider and documentation.

Sample: https://stackblitz.com/edit/5gq3apyg-5e1exnc1?file=index.ts

Physical provider: https://github.com/SyncfusionExamples/ej2-aspcore-file-provider

Documentation: https://ej2.syncfusion.com/javascript/documentation/file-manager/file-system-provider#aspnet-core-file-system-provider

Check out the shared details and let us know if you need any further assistance.