Working with server
Svelte File Manager widget allows working both with the client and server data. The widget doesn't impose any special requirements on the backend. It can be easily connected with any backend platform.
You are free to create your custom server script or if you want to use the ready-made built-in backend, you can find the needed scripts in the following repository: Go backend
Loading and saving data
To load data from the server, you need to fetch data from it and then pass to Filemanager with the same data tag. All information about loading data see here: Loading data.
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} />
To save data to the backend, you need to subscribe to the data-related actions which results you want to save and send changes to the backend.
Example:
<script>
import { Filemanager } from "@wx/svelte-filemanager";
const server = "https://some-backend-url";
function saveData(ev) {
const { id, name } = ev.detail;
const req = JSON.stringify({
method: "PUT",
headers: { "Content-Type": "application/json" },
body: { operation: "rename", name },
});
fetch(server + "/files/" + encodeURIComponent(id), req);
}
</script>
<Filemanager on:rename-file="{saveData}" />
To automate the process of working with the server, you can use the ready-made helper which is the RestDataProvider service.
RestDataProvider
The RestDataProvider service:
- provides special methods for loading data:
- listens to the following actions and sends REST requests (via its
send()
method) to perform the corresponding data operations on the backend:- "create-file"
- "rename-file"
- "delete-files"
- "copy-files"
- "move-files"
- "upload-file"
- offers the debounce functionality to avoid excessive server requests
Loading and saving data with RestDataProvider
To connect RestDataProvider to the backend, you need to import the RestDataProvider component, and then create an instance by providing the path to your server in constructor.
You should also include RestDataProvider into the Event Bus order via the api.setNext()
method to send the corresponding requests to the server.
In the example below, to save data, we use the api.setNext
method and to load data, we apply loadFiles
, loadInfo
methods.
<script>
import { RestDataProvider } from "@wx/filemanager-data-provider";
import { Filemanager } from "@wx/svelte-filemanager";
const url = "https://some-backend-url";
const restProvider = new RestDataProvider(url);
function init(api) {
api.setNext(restProvider); // saving data
}
$: data = [];
$: drive = {};
//loading data
Promise.all([restProvider.loadFiles(), restProvider.loadInfo()]).then(([files, info]) => {
data = files;
drive = info.stats;
});
</script>
<Filemanager {init} {data} {drive} />
Related articles: How to access File Manager API
Related samples: Saving to backend