Loading data

Preparing data

The following types of information can be loaded into Svelte 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/Nigth_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>
  import { Filemanager } from "@wx/svelte-filemanager";
  import { getData } from "./common/data";

</script>

Second, define components during Filemanager initialization:

<script>
 import { Filemanager } from "@wx/svelte-filemanager";
 import { getData, getDrive } from "./common/data";

</script>

<Filemanager data={getData()} drive={getDrive()} />

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>
  import { Filemanager } from "@wx/svelte-filemanager";

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

  let rawData = [];

  let api;

  $: {
    fetch(server + "/files")
      .then((data) => data.json())
      .then((data) => (rawData = data));
  }
</script>

<Filemanager bind:api data={rawData} />

• 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>
  import { RestDataProvider } from "@wx/svelte-filemanager";
  import { Filemanager } from "@wx/filemanager-data-provider";

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

  const restProvider = new RestDataProvider(url);

  $: data = [];
  $: drive = {};

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

<Filemanager {data} {drive} />

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>
  import { Filemanager } from "@wx/svelte-filemanager";

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

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

  let rawData = [];
  $: {
    fetch(server + "/files")
      .then((data) => data.json())
      .then((data) => (rawData = data));
  }
</script>

<Filemanager 
  bind:api
  data={rawData}
  on:data-request={loadData} />

---

Related samples:

• Backend data
• Saving to backend