Displaying files

The FileBrowser component only has one required prop - files. This prop defines what files are actually shown to the user. Minimal FileBrowser usage could look like this:

const FilesExample = () => {
    const files: FileArray = [
        // `FileArray` is a type exported by Chonky
        null, // Will show loading animation
        { id: 'xWbZ', name: 'Instructions.txt' },
        { id: 'xWbZ', name: 'Tools', isDir: true },
    ];
    return (
        <FileBrowser files={files}>
            <FileNavbar />
            <FileToolbar />
            <FileList />
            <FileContextMenu />
        </FileBrowser>
    );
};

The files prop should be an array of file descriptions or nulls. File descriptions are plain JS objects that follow the FileData type (more on it below). Nulls represent loading files - a placeholder loading animation will be shown in their place. The formal type for this prop is defined as follows:

type FileArray = Nullable<FileData>[];
// i.e. Array of nulls and `FileData` objects mixed together

The files array should be immutable. If you're not sure what this means, please read the Immutability section from the sidebar. This is important.

The `FileData` type

The FileData type is shown below. It might look intimidating, but please note that id and name are the only required fields. All other fields are optional, and are there to give you more control over how Chonky displays your files. This type is exported from Chonky for your convenience.

export interface FileData {
    id: string; // (Required) String that uniquely identifies the file
    name: string; // (Required) Full name, e.g. `MyImage.jpg`
    ext?: string; // File extension, e.g. `.jpg`
    isDir?: boolean; // Is a directory, default: false
    isHidden?: boolean; // Is a hidden file, default: false
    isSymlink?: boolean; // Is a symlink, default: false
    isEncrypted?: boolean; // Is encrypted in some way, default: false
    openable?: boolean; // Can be opened, default: true
    selectable?: boolean; // Can be selected, default: true
    draggable?: boolean; // Can be dragged, default: true
    droppable?: boolean; // Can have files dropped into it, default: true for folders
    size?: number; // File size in bytes
    modDate?: Date | string; // Last change date (or its string representation)
    childrenCount?: number; // Number of files inside of a folder (only for folders)
    // Default preview overriding
    color?: string; // Color to use for this file
    icon?: ChonkyIconName | string | any; // Icon to use for this file
    thumbnailUrl?: string; // Automatically load thumbnail from this URL
    [property: string]: any; // Any other user-defined property
}

It is very important that file IDs are unique.

If file IDs are not unique, the consequences can be dire - e.g. your users can irrecoverably delete the wrong file. Chonky tries to protect you from this by scanning your file array for duplicate IDs, but you should put some extra checks in your code too. You can never be too safe.

The file extension is automatically extracted from the name field, so you don't need to provide an ext field yourself. In the rare case where the automatic extension detection fails (for example: file.tar.gz), you can provide the ext field explicitly. Please make sure the extension is included in both name and ext:

const myFile: FileData = {
    id: 'AsVz',
    name: 'file.tar.gz',
    ext: '.tar.gz',
};
console.log(myFile.name.endsWith(myFile.ext)); // Should always print `true`

Example file array

The live example below shows different possible file configurations.

0 items

() => {
  const files = [
    null, // Loading animation will be shown for this file
    null,
    {
      id: 'nTe',
      name: 'Normal file.yml',
      size: 890,
      modDate: new Date('2012-01-01'),
    },
    {
      id: 'zxc',
      name: 'Hidden file.mp4',
      isHidden: true,
      size: 890,
    },
    {
      id: 'bnm',
      name: 'Normal folder',
      isDir: true,
      childrenCount: 12,
    },
    {
      id: 'vfr',
      name: 'Symlink folder',
      isDir: true,
      isSymlink: true,
      childrenCount: 0,
    },
    {
      id: '7zp',
      name: 'Encrypted file.7z',
      isEncrypted: true,
    },
    {
      id: 'qwe',
      name: 'Not selectable.tar.gz',
      ext: '.tar.gz', // Custom extension
      selectable: false, // Disable selection
      size: 54300000000,
      modDate: new Date(),
    },
    {
      id: 'rty',
      name: 'Not openable.pem',
      openable: false, // Prevent opening
      size: 100000000,
    },
    {
      id: 'btj',
      name: 'Not draggable.csv',
      draggable: false, // Prevent this files from being dragged
    },
    {
      id: 'upq',
      name: 'Not droppable',
      isDir: true,
      droppable: false, // Prevent files from being dropped into this folder
    },
    {
      id: 'mRw',
      name: 'Unknown file name',
    },
    {
      id: 'mEt',
      name: 'Custom icon & color',
      color: '#09f',
      icon: ChonkyIconName.dndCanDrop,
    },
  ]
  return (
    <div style={{ height: 700 }}>
      <FileBrowser files={files}>
        <FileNavbar />
        <FileToolbar />
        <FileList />
        <FileContextMenu />
      </FileBrowser>
    </div>
  )
}

() => {
  const files = [
    null, // Loading animation will be shown for this file
    null,
    {
      id: 'nTe',
      name: 'Normal file.yml',
      size: 890,
      modDate: new Date('2012-01-01'),
    },
    {
      id: 'zxc',
      name: 'Hidden file.mp4',
      isHidden: true,
      size: 890,
    },
    {
      id: 'bnm',
      name: 'Normal folder',
      isDir: true,
      childrenCount: 12,
    },
    {
      id: 'vfr',
      name: 'Symlink folder',
      isDir: true,
      isSymlink: true,
      childrenCount: 0,
    },
    {
      id: '7zp',
      name: 'Encrypted file.7z',
      isEncrypted: true,
    },
    {
      id: 'qwe',
      name: 'Not selectable.tar.gz',
      ext: '.tar.gz', // Custom extension
      selectable: false, // Disable selection
      size: 54300000000,
      modDate: new Date(),
    },
    {
      id: 'rty',
      name: 'Not openable.pem',
      openable: false, // Prevent opening
      size: 100000000,
    },
    {
      id: 'btj',
      name: 'Not draggable.csv',
      draggable: false, // Prevent this files from being dragged
    },
    {
      id: 'upq',
      name: 'Not droppable',
      isDir: true,
      droppable: false, // Prevent files from being dropped into this folder
    },
    {
      id: 'mRw',
      name: 'Unknown file name',
    },
    {
      id: 'mEt',
      name: 'Custom icon & color',
      color: '#09f',
      icon: ChonkyIconName.dndCanDrop,
    },
  ]
  return (
    <div style={{ height: 700 }}>
      <FileBrowser files={files}>
        <FileNavbar />
        <FileToolbar />
        <FileList />
        <FileContextMenu />
      </FileBrowser>
    </div>
  )
}

Displaying files

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}The FileData type

Example file array

The `FileData` type