Loading data

Preparing data

The following types of information can be loaded into Vue File Manager:

• data - an array of objects containing the files structure data

Example:

const data = [
  {
    id: "/Code",
    date: new Date(2023, 11, 2, 17, 25),
    type: "folder",
  },
  {
    id: "/Music",
    date: new Date(2023, 11, 1, 14, 45),
    type: "folder",
  },
  {
    id: "/Music/Animal_sounds.mp3",
    size: 1457296,
    date: new Date(2023, 11, 1, 14, 45),
    type: "file",
  },
  {
    id: "/Music/The_sounds_of_silence.mp3",
    size: 6825661,
    date: new Date(2023, 11, 9, 14, 45),
    type: "file",
  },
  {
    id: "/Pictures/Forest.jpeg",
    size: 907532,
    date: new Date(2023, 11, 4, 4, 1),
    type: "file",
  },
  {
    id: "/Pictures/Night_sky.jpg",
    size: 84506,
    date: new Date(2023, 11, 4, 4, 1),
    type: "file",
  },
  {
    id: "/Pictures/Pattern.pdf",
    size: 124506,
    date: new Date(2023, 11, 4, 4, 5),
    type: "file",
  },
];

• drive - an object with the drive memory data

Example:

const drive = {
  used: 15200000000,
  total: 50000000000,
};

Loading data

You can load local data at the initialization stage.

For example, you can load data from a separate file. First, include the data file to the application page and import the Filemanager component:

<script setup>
  import { Filemanager } from "@svar-ui/vue-filemanager";
  import { getData } from "./common/data";
</script>

Second, define components during Filemanager initialization:

<script setup>
 import { Filemanager } from "@svar-ui/vue-filemanager";
 import { getData, getDrive } from "./common/data";
</script>

<template>
  <Filemanager :data="getData()" :drive="getDrive()" />
</template>

You can also load server data. You need to fetch data from the server and then pass to Filemanager with the same data tag.

To get server data, you can do one of the following:

• send the request for data using the native fetch method (or any other way)

Example:

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

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

  const rawData = ref([]);

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

<template>
  <Filemanager :data="rawData" />
</template>

• apply the loadFiles method of the RestDataProvider service

In the example below we apply the loadFiles method to load files data and we use the loadInfo method to get data about the drive memory.

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

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

  const restProvider = new RestDataProvider(url);

  const data = ref([]);
  const drive = ref({});

  Promise.all([restProvider.loadFiles(), restProvider.loadInfo()]).then(([files, info]) => {
    data.value = files;
    drive.value = info.stats;
  });
</script>

<template>
  <Filemanager :data="data" :drive="drive" />
</template>

Dynamic data loading

The widget also allows loading data dynamically. To enable it, in the data array you should define the lazy field for the folders which content you would like to load dynamically and tune your server so that the content of these folders is not loaded during the initial loading.

Example of the data array:

const data = [
  {
    id: "/Code",
    date: new Date(2023, 11, 2, 17, 25),
    type: "folder",
    lazy: true,
  },
  {
    id: "/Music",
    date: new Date(2023, 11, 1, 14, 45),
    type: "folder",
    lazy: true,
  },
  {
    id: "/Animal_sounds.mp3",
    size: 1457296,
    date: new Date(2023, 11, 1, 14, 45),
    type: "file",
  },
  {
    id: "/The_sounds_of_silence.mp3",
    size: 6825661,
    date: new Date(2023, 11, 9, 14, 45),
    type: "file",
  },
];

When such folders are opened in the UI, Filemanager will issue the request-data action with the folder id as a parameter. You can listen to this action, fetch folder data from the server and parse to the component calling the provide-data action.

Example:

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

  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 samples:

• Backend data
• Saving to backend