Installation and initialization

This File Manager widget is designed to be incorporated into your project in Svelte.

Installing File Manager

To install the trial version of the Svelte File Manager widget, you should request access to SVAR npm registry by signing up here: https://svelte-widgets.com/filemanager/#signup, and then run the following command:

//npm
npm install @wx/trial-svelte-filemanager

//yarn
yarn add @wx/trial-svelte-filemanager

To install commercial license, run:

//npm
npm install @wx/svelte-filemanager

//yarn
yarn add @wx/svelte-filemanager

Initializing

Import the Filemanager component:

<script>
    import { Filemanager } from "@wx/svelte-filemanager";
</script>

Initialize the Filemanager properties.

The example below creates the File Manager with two folders and three files. The data array holds the files structure, paths to the items, creation dates and the sizes of items. It's necessary to define the data component inside the Filemanager tag.

<script>
  import { Filemanager } from "@wx/svelte-filemanager";

  const rawdata = [
    {
      id: "/Code",
      size: 4096,
      date: new Date(2023, 11, 2, 17, 25),
      type: "folder",
    },
    {
      id: "/Music",
      size: 4096,
      date: new Date(2023, 11, 1, 14, 45),
      type: "folder",
    },

    {
      id: "/Info.txt",
      size: 1000,
      date: new Date(2023, 10, 30, 6, 13),
      type: "file",
    },
    {
      //parent: "/Code/Datepicker",
      id: "/Code/Datepicker/Year.svelte",
      size: 1595,
      date: new Date(2023, 11, 7, 15, 23),
      type: "file",
    },
    {
      id: "/Pictures/162822515312968813.png",
      size: 510885,
      date: new Date(2023, 11, 1, 14, 45),
      type: "file",
    },
  ];
</script>

<Filemanager data={rawdata} />

Now you can move forward and load data. See Loading data.