Skip to main content

provide-data

Description​

Reloads file and folder data for a branch

The action is called by the user to reload branch data at any time, or within the request-data action handler to parse data to a lazily loaded branch.

Usage​

"provide-data": ({
  data: {
    id: string,
    type?: "file" | "folder",
    size?: number,
    lazy?: boolean,
    date?: Date,
    [key: string]: any,
  }[],
  id: string,
}) => boolean | void;

Parameters​

The callback of the provide-data action takes an object with the following parameters:

  • data - (required) an array with new data provided. Each arary item contains:
    • id (string) - (required) the ID of an item
    • type (string) - (optional) the type which can be "file" or "folder"
    • size (number) - (optional) an item size in bytes
    • lazy (boolean) - (optional) when set to true for the "folder" items, indicates that their content needs to be requested separately
    • date (Date) - (optional) an item date
  • id (string) - (required) the ID of the folder that you are populating with data. If the folder already contains the data, it will be replaced. Pass "/" (id of the root folder) to reload entire FileManager data.

Example​

<script setup>
  import { Filemanager } from "@svar-ui/vue-filemanager";
  import { ref } from "vue";

  const server = "https://some-backend-url";

  const api = ref(null);

  function loadData(ev) {
    const id = ev.id;
    fetch(server + "/files?id=" + encodeURIComponent(id))
      .then((data) => data.json())
      .then((data) => api.value.exec("provide-data", { data, id }));
  }

  const rawData = ref([]);
  fetch(server + "/files")
    .then((data) => data.json())
    .then((data) => (rawData.value = data));
</script>

<template>
  <Filemanager 
    ref="api" 
    :data="rawData"
    :onrequestdata="loadData" 
  />
</template>

Related articles: