Skip to main content

api.getFile()

Description​

Allows getting data for a file or folder

Usage​

getFile: (
  id: string
) => {
  id: string,
  type?: "file" | "folder",
  size?: number,
  lazy?: boolean,
  date?: Date,
  parent: string,
  name: string,
  ext: string,
  open?: boolean,
  data?: {
    id: string,
    type?: "file" | "folder",
    size?: number,
    lazy?: boolean,
    date?: Date,
    parent: string,
    name: string,
    ext: string,
    $level: number,
    open?: boolean,
    data?: any[],
    [key: string]: any,
  }[],
  [key: string]: any,
} | null;

Parameters​

  • id - the requested file ID

Returns​

Returns IParsedEntity object if a file/folder with the given ID exists, or null if it doesn’t. An object that is returned has the following parameters:

  • id - (required) unique identifier of the file or folder
  • type - (optional) it can be "file" | "folder"` that indicates whether the entity is a file or folder
  • size - (optional) the size of the file in bytes (folders may omit this)
  • lazy - (optional) if true, children are loaded on demand
  • date - (optional) last modification or creation date
  • parent - (required) ID of the parent folder
  • name - (required) the name of the file or folder
  • ext - (required) file extension; empty string for folders
  • open - (optional) whether the folder is expanded in the UI
  • data - (optional) nested children (if any), each with the same structure as file
  • [key: string]: any - additional metadata fields provided by the backend

The object that is returned is as in the example below:

data:null
date:Thu Nov 30 2023 06:13:00 GMT+0300 {}
ext:"txt"
id:"/Info.txt"
name:"Info.txt"
parent:"/"
size:1000
type:"file"

Example​

import { useRef } from "react";
import { Filemanager } from "@svar-ui/react-filemanager";

export default function Example() {
  const apiRef = useRef(null);

  const logSelection = () => {
    const id = apiRef.current.getState().selected[0]; // get selected id
    alert(apiRef.current.getFile(id).name); // show the file name
  };

  return (
    <Filemanager
      ref={apiRef}
      onSelectFile={logSelection}
    />
  );
}

Related articles: