File Explorer Component in JavaScript | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (175).NET Core  (29).NET MAUI  (208)Angular  (109)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (41)Black Friday Deal  (1)Blazor  (220)BoldSign  (14)DocIO  (24)Essential JS 2  (107)Essential Studio  (200)File Formats  (66)Flutter  (133)JavaScript  (221)Microsoft  (119)PDF  (81)Python  (1)React  (101)Streamlit  (1)Succinctly series  (131)Syncfusion  (919)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (51)Windows Forms  (61)WinUI  (68)WPF  (159)Xamarin  (161)XlsIO  (36)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (150)Chart  (132)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (633)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (40)Extensions  (22)File Manager  (7)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (508)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (11)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (387)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (597)What's new  (333)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)

File Explorer in JavaScript

The File Explorer control for JavaScript provides a Windows Explorer-like interface within a web application, allowing end-users to browse, upload, and download files. Folder structure can be changed by renaming, moving, or deleting folders and files, and the control’s layout and folder management can be customized.

Features of File Explorer

Layout Types

The File Explorer control supports two types of layouts to view files: thumbnail view and grid view.

clip_image002

File Explorer in Detailed Grid View

clip_image004

File Explorer in Thumbnail View

Image Preview

You can preview an image by double clicking it, which opens the image in a dialog window. The previewed image can then be zoomed by resizing the dialog box.

clip_image006

File Explorer with Image Preview

Custom Layout

The layout of the File Explorer panel can be customized.

clip_image008

File Explorer with Customized Layout

Sorting Support

In the details view or the grid view, files can be sorted by desired fields.

clip_image010

File Explorer in Detailed Grid View with Sorting Support

Custom Tool Support

In the File Explorer toolbar, you can create custom tools with customized actions. For example, here the Help tool has been created as a custom tool in the toolbar.

clip_image002[4]

File Explorer with Custom Tool option

For more information:

HTML5/ JavaScript: https://js.syncfusion.com/demos/web/#!/azure/fileexplorer/DefaultFunctionalities

ASP.NET MVC: https://mvc.syncfusion.com/demos/web/fileexplorer/default

Online documentation of File Explorer: https://help.syncfusion.com/aspnet/fileexplorer/overview

Content Editor: Usha Clementine Henry | Content Contributor: Balaji Murugesan

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed