Nucleus .Net Core CMS

FileSelector Control

Overview

The FileSelector control (View Component) provides a reusable file selection user interface for Nucleus extensions. It allows users to browse, select, and preview files from the site's file system, supporting multiple file system providers, folder navigation, and permission checks.

Screenshot

Usage

Add a FileSelector control to your Razor view using code like this:

@await Component.InvokeAsync(typeof(Nucleus.ViewFeatures.Controls.FileSelector), new 
{ 
  file = Model.SelectedDocument.File, 
  propertyName = "SelectedDocument.File" 
})

Parameters
file The currently selected file, or null if no file is selected.
pattern Regular expression to filter file names (optional).
propertyName Name of the view model property to bind the selected file to (default: "SelectedFile").
selectAnotherActionName Controller action name for "Select Another" (default: "SelectAnother").
showSelectAnother Specifies whether to show the "Select Another" button (default: true).
noFilesMessage Message to display when no files are available (default: "(no files)").
showImagePreview Specifies whether to show an image preview for image files (default: false).

Features

  • Folder Navigation: Allows navigation through folders, including "up one level" and current folder selection.
  • Permission Checks: Only displays folders/files the user has permission to browse.
  • File Filtering: Supports filtering files by regular expression.
  • Image Preview: Optionally displays a preview for image files.

Notes

  • If no file system provider is specified, the first available provider is used by default.
  • The folders drop-down list includes the current folder, a separator, and an "up one level" option when appropriate.
  • The File Selector control can be used alongside a FileUpload control to allow users to upload new files directly from your user interface.
Privacy Policy