diff --git a/.gitignore b/.gitignore
index 6b0e2d26..a4ce7c6c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,4 +33,5 @@ test-results/
 playwright-report/
 
 /src/page/plugins/*
+!/src/page/plugins/filetransfer
 !/src/page/plugins/.gitkeep
diff --git a/src/page/plugins/filetransfer/OpenApi.yaml b/src/page/plugins/filetransfer/OpenApi.yaml
new file mode 100644
index 00000000..c9698030
--- /dev/null
+++ b/src/page/plugins/filetransfer/OpenApi.yaml
@@ -0,0 +1,128 @@
+openapi: 3.0.0
+
+info:
+  title: n.eko REST API
+  description: Next Gen Renderer Browser.
+  license:
+    name: Apache 2.0
+    url: 'http://www.apache.org/licenses/LICENSE-2.0.html'
+  version: "1.0.0"
+
+servers:
+  - description: Local server
+    url: http://localhost:3000
+  # Added by API Auto Mocking Plugin
+  - description: SwaggerHub API Auto Mocking
+    url: https://virtserver.swaggerhub.com/m1k1o/n.eko/1.0.0
+
+tags:
+  - name: filetransfer
+    description: File Transfer API
+
+paths:
+
+  #
+  # filetransfer
+  #
+
+  /api/filetransfer:
+    get:
+      tags:
+        - filetransfer
+      parameters:
+        - name: filename
+          in: query
+          required: true
+          schema:
+            type: string
+          description: The file name
+      summary: download file
+      operationId: downloadFile
+      responses:
+        '200':
+          description: OK
+          content:
+            application/octet-stream:
+              schema:
+                type: string
+                format: binary
+        '401':
+          $ref: '#/components/responses/Unauthorized'
+        '403':
+          $ref: '#/components/responses/Forbidden'
+    post:
+      tags:
+        - filetransfer
+      summary: upload file
+      operationId: uploadFile
+      responses:
+        '200':
+          description: OK
+        '401':
+          $ref: '#/components/responses/Unauthorized'
+        '403':
+          $ref: '#/components/responses/Forbidden'
+      requestBody:
+        content:
+          multipart/form-data:
+            schema:
+              $ref: '#/components/schemas/FileUpload'
+
+components:
+  securitySchemes:
+    CookieAuth:
+      type: apiKey
+      in: cookie
+      name: NEKO_SESSION
+    BearerAuth:
+      type: http
+      scheme: bearer
+    TokenAuth:
+      type: apiKey
+      in: query
+      name: token
+
+  responses:
+    NotFound:
+      description: The specified resource was not found
+      content:
+        application/json:
+          schema:
+            $ref: '#/components/schemas/ErrorMessage'
+    Unauthorized:
+      description: Unauthorized
+      content:
+        application/json:
+          schema:
+            $ref: '#/components/schemas/ErrorMessage'
+    Forbidden:
+      description: Forbidden
+      content:
+        application/json:
+          schema:
+            $ref: '#/components/schemas/ErrorMessage'
+
+  schemas:
+    ErrorMessage:
+      type: object
+      properties:
+        message:
+          type: string
+    
+    #
+    # filetransfer
+    #
+
+    FileUpload:
+      type: object
+      properties:
+        files:
+          type: array
+          items:
+            type: string
+            format: binary
+
+security:
+  - BearerAuth: []
+  - CookieAuth: []
+  - TokenAuth: []
diff --git a/src/page/plugins/filetransfer/api-gen b/src/page/plugins/filetransfer/api-gen
new file mode 100755
index 00000000..20eb3b09
--- /dev/null
+++ b/src/page/plugins/filetransfer/api-gen
@@ -0,0 +1,18 @@
+#!/bin/bash
+VERSION="1.0.0"
+
+rm -rf "${PWD}/api"
+mkdir "${PWD}/api"
+
+docker run --rm \
+    --user "$(id -u):$(id -g)" \
+    -v "${PWD}/api:/local/out" \
+    -v "${PWD}/OpenApi.yaml:/local/in.yaml" \
+    openapitools/openapi-generator-cli generate \
+        -i /local/in.yaml \
+        -g typescript-axios \
+        -o /local/out \
+        --additional-properties=enumPropertyNaming=original,modelPropertyNaming=original,withSeparateModelsAndApi=true,modelPackage=models,apiPackage=api
+
+# Remove not needed git_push.sh
+rm -f "${PWD}/api/git_push.sh"
diff --git a/src/page/plugins/filetransfer/api/.gitignore b/src/page/plugins/filetransfer/api/.gitignore
new file mode 100644
index 00000000..149b5765
--- /dev/null
+++ b/src/page/plugins/filetransfer/api/.gitignore
@@ -0,0 +1,4 @@
+wwwroot/*.js
+node_modules
+typings
+dist
diff --git a/src/page/plugins/filetransfer/api/.npmignore b/src/page/plugins/filetransfer/api/.npmignore
new file mode 100644
index 00000000..999d88df
--- /dev/null
+++ b/src/page/plugins/filetransfer/api/.npmignore
@@ -0,0 +1 @@
+# empty npmignore to ensure all required files (e.g., in the dist folder) are published by npm
\ No newline at end of file
diff --git a/src/page/plugins/filetransfer/api/.openapi-generator-ignore b/src/page/plugins/filetransfer/api/.openapi-generator-ignore
new file mode 100644
index 00000000..7484ee59
--- /dev/null
+++ b/src/page/plugins/filetransfer/api/.openapi-generator-ignore
@@ -0,0 +1,23 @@
+# OpenAPI Generator Ignore
+# Generated by openapi-generator https://github.com/openapitools/openapi-generator
+
+# Use this file to prevent files from being overwritten by the generator.
+# The patterns follow closely to .gitignore or .dockerignore.
+
+# As an example, the C# client generator defines ApiClient.cs.
+# You can make changes and tell OpenAPI Generator to ignore just this file by uncommenting the following line:
+#ApiClient.cs
+
+# You can match any string of characters against a directory, file or extension with a single asterisk (*):
+#foo/*/qux
+# The above matches foo/bar/qux and foo/baz/qux, but not foo/bar/baz/qux
+
+# You can recursively match patterns against a directory, file or extension with a double asterisk (**):
+#foo/**/qux
+# This matches foo/bar/qux, foo/baz/qux, and foo/bar/baz/qux
+
+# You can also negate patterns with an exclamation (!).
+# For example, you can ignore all files in a docs folder with the file extension .md:
+#docs/*.md
+# Then explicitly reverse the ignore rule for a single file:
+#!docs/README.md
diff --git a/src/page/plugins/filetransfer/api/.openapi-generator/FILES b/src/page/plugins/filetransfer/api/.openapi-generator/FILES
new file mode 100644
index 00000000..2beca8fa
--- /dev/null
+++ b/src/page/plugins/filetransfer/api/.openapi-generator/FILES
@@ -0,0 +1,12 @@
+.gitignore
+.npmignore
+.openapi-generator-ignore
+api.ts
+api/filetransfer-api.ts
+base.ts
+common.ts
+configuration.ts
+git_push.sh
+index.ts
+models/error-message.ts
+models/index.ts
diff --git a/src/page/plugins/filetransfer/api/.openapi-generator/VERSION b/src/page/plugins/filetransfer/api/.openapi-generator/VERSION
new file mode 100644
index 00000000..08bfd064
--- /dev/null
+++ b/src/page/plugins/filetransfer/api/.openapi-generator/VERSION
@@ -0,0 +1 @@
+7.5.0-SNAPSHOT
diff --git a/src/page/plugins/filetransfer/api/api.ts b/src/page/plugins/filetransfer/api/api.ts
new file mode 100644
index 00000000..448fea95
--- /dev/null
+++ b/src/page/plugins/filetransfer/api/api.ts
@@ -0,0 +1,18 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * n.eko REST API
+ * Next Gen Renderer Browser.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+
+export * from './api/filetransfer-api';
+
diff --git a/src/page/plugins/filetransfer/api/api/filetransfer-api.ts b/src/page/plugins/filetransfer/api/api/filetransfer-api.ts
new file mode 100644
index 00000000..f9730d8e
--- /dev/null
+++ b/src/page/plugins/filetransfer/api/api/filetransfer-api.ts
@@ -0,0 +1,229 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * n.eko REST API
+ * Next Gen Renderer Browser.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+import type { Configuration } from '../configuration';
+import type { AxiosPromise, AxiosInstance, RawAxiosRequestConfig } from 'axios';
+import globalAxios from 'axios';
+// Some imports not used depending on template conditions
+// @ts-ignore
+import { DUMMY_BASE_URL, assertParamExists, setApiKeyToObject, setBasicAuthToObject, setBearerAuthToObject, setOAuthToObject, setSearchParams, serializeDataIfNeeded, toPathString, createRequestFunction } from '../common';
+// @ts-ignore
+import { BASE_PATH, COLLECTION_FORMATS, BaseAPI, operationServerMap } from '../base';
+import type { RequestArgs, RequiredError } from '../base';
+// @ts-ignore
+import type { ErrorMessage } from '../models';
+/**
+ * FiletransferApi - axios parameter creator
+ * @export
+ */
+export const FiletransferApiAxiosParamCreator = function (configuration?: Configuration) {
+    return {
+        /**
+         * 
+         * @summary download file
+         * @param {string} filename The file name
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        downloadFile: async (filename: string, options: RawAxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'filename' is not null or undefined
+            assertParamExists('downloadFile', 'filename', filename)
+            const localVarPath = `/api/filetransfer`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication CookieAuth required
+
+            // authentication TokenAuth required
+            await setApiKeyToObject(localVarQueryParameter, "token", configuration)
+
+            // authentication BearerAuth required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (filename !== undefined) {
+                localVarQueryParameter['filename'] = filename;
+            }
+
+
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @summary upload file
+         * @param {Array<File>} [files] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        uploadFile: async (files?: Array<File>, options: RawAxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/api/filetransfer`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+            const localVarFormParams = new ((configuration && configuration.formDataCtor) || FormData)();
+
+            // authentication CookieAuth required
+
+            // authentication TokenAuth required
+            await setApiKeyToObject(localVarQueryParameter, "token", configuration)
+
+            // authentication BearerAuth required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+            if (files) {
+                files.forEach((element) => {
+                    localVarFormParams.append('files', element as any);
+                })
+            }
+
+    
+    
+            localVarHeaderParameter['Content-Type'] = 'multipart/form-data';
+    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = localVarFormParams;
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+    }
+};
+
+/**
+ * FiletransferApi - functional programming interface
+ * @export
+ */
+export const FiletransferApiFp = function(configuration?: Configuration) {
+    const localVarAxiosParamCreator = FiletransferApiAxiosParamCreator(configuration)
+    return {
+        /**
+         * 
+         * @summary download file
+         * @param {string} filename The file name
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async downloadFile(filename: string, options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<File>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.downloadFile(filename, options);
+            const localVarOperationServerIndex = configuration?.serverIndex ?? 0;
+            const localVarOperationServerBasePath = operationServerMap['FiletransferApi.downloadFile']?.[localVarOperationServerIndex]?.url;
+            return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath);
+        },
+        /**
+         * 
+         * @summary upload file
+         * @param {Array<File>} [files] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async uploadFile(files?: Array<File>, options?: RawAxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.uploadFile(files, options);
+            const localVarOperationServerIndex = configuration?.serverIndex ?? 0;
+            const localVarOperationServerBasePath = operationServerMap['FiletransferApi.uploadFile']?.[localVarOperationServerIndex]?.url;
+            return (axios, basePath) => createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration)(axios, localVarOperationServerBasePath || basePath);
+        },
+    }
+};
+
+/**
+ * FiletransferApi - factory interface
+ * @export
+ */
+export const FiletransferApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
+    const localVarFp = FiletransferApiFp(configuration)
+    return {
+        /**
+         * 
+         * @summary download file
+         * @param {string} filename The file name
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        downloadFile(filename: string, options?: any): AxiosPromise<File> {
+            return localVarFp.downloadFile(filename, options).then((request) => request(axios, basePath));
+        },
+        /**
+         * 
+         * @summary upload file
+         * @param {Array<File>} [files] 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        uploadFile(files?: Array<File>, options?: any): AxiosPromise<void> {
+            return localVarFp.uploadFile(files, options).then((request) => request(axios, basePath));
+        },
+    };
+};
+
+/**
+ * FiletransferApi - object-oriented interface
+ * @export
+ * @class FiletransferApi
+ * @extends {BaseAPI}
+ */
+export class FiletransferApi extends BaseAPI {
+    /**
+     * 
+     * @summary download file
+     * @param {string} filename The file name
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof FiletransferApi
+     */
+    public downloadFile(filename: string, options?: RawAxiosRequestConfig) {
+        return FiletransferApiFp(this.configuration).downloadFile(filename, options).then((request) => request(this.axios, this.basePath));
+    }
+
+    /**
+     * 
+     * @summary upload file
+     * @param {Array<File>} [files] 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof FiletransferApi
+     */
+    public uploadFile(files?: Array<File>, options?: RawAxiosRequestConfig) {
+        return FiletransferApiFp(this.configuration).uploadFile(files, options).then((request) => request(this.axios, this.basePath));
+    }
+}
+
diff --git a/src/page/plugins/filetransfer/api/base.ts b/src/page/plugins/filetransfer/api/base.ts
new file mode 100644
index 00000000..60439c98
--- /dev/null
+++ b/src/page/plugins/filetransfer/api/base.ts
@@ -0,0 +1,86 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * n.eko REST API
+ * Next Gen Renderer Browser.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+import type { Configuration } from './configuration';
+// Some imports not used depending on template conditions
+// @ts-ignore
+import type { AxiosPromise, AxiosInstance, RawAxiosRequestConfig } from 'axios';
+import globalAxios from 'axios';
+
+export const BASE_PATH = "http://localhost:3000".replace(/\/+$/, "");
+
+/**
+ *
+ * @export
+ */
+export const COLLECTION_FORMATS = {
+    csv: ",",
+    ssv: " ",
+    tsv: "\t",
+    pipes: "|",
+};
+
+/**
+ *
+ * @export
+ * @interface RequestArgs
+ */
+export interface RequestArgs {
+    url: string;
+    options: RawAxiosRequestConfig;
+}
+
+/**
+ *
+ * @export
+ * @class BaseAPI
+ */
+export class BaseAPI {
+    protected configuration: Configuration | undefined;
+
+    constructor(configuration?: Configuration, protected basePath: string = BASE_PATH, protected axios: AxiosInstance = globalAxios) {
+        if (configuration) {
+            this.configuration = configuration;
+            this.basePath = configuration.basePath ?? basePath;
+        }
+    }
+};
+
+/**
+ *
+ * @export
+ * @class RequiredError
+ * @extends {Error}
+ */
+export class RequiredError extends Error {
+    constructor(public field: string, msg?: string) {
+        super(msg);
+        this.name = "RequiredError"
+    }
+}
+
+interface ServerMap {
+    [key: string]: {
+        url: string,
+        description: string,
+    }[];
+}
+
+/**
+ *
+ * @export
+ */
+export const operationServerMap: ServerMap = {
+}
diff --git a/src/page/plugins/filetransfer/api/common.ts b/src/page/plugins/filetransfer/api/common.ts
new file mode 100644
index 00000000..854e27fd
--- /dev/null
+++ b/src/page/plugins/filetransfer/api/common.ts
@@ -0,0 +1,150 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * n.eko REST API
+ * Next Gen Renderer Browser.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+import type { Configuration } from "./configuration";
+import type { RequestArgs } from "./base";
+import type { AxiosInstance, AxiosResponse } from 'axios';
+import { RequiredError } from "./base";
+
+/**
+ *
+ * @export
+ */
+export const DUMMY_BASE_URL = 'https://example.com'
+
+/**
+ *
+ * @throws {RequiredError}
+ * @export
+ */
+export const assertParamExists = function (functionName: string, paramName: string, paramValue: unknown) {
+    if (paramValue === null || paramValue === undefined) {
+        throw new RequiredError(paramName, `Required parameter ${paramName} was null or undefined when calling ${functionName}.`);
+    }
+}
+
+/**
+ *
+ * @export
+ */
+export const setApiKeyToObject = async function (object: any, keyParamName: string, configuration?: Configuration) {
+    if (configuration && configuration.apiKey) {
+        const localVarApiKeyValue = typeof configuration.apiKey === 'function'
+            ? await configuration.apiKey(keyParamName)
+            : await configuration.apiKey;
+        object[keyParamName] = localVarApiKeyValue;
+    }
+}
+
+/**
+ *
+ * @export
+ */
+export const setBasicAuthToObject = function (object: any, configuration?: Configuration) {
+    if (configuration && (configuration.username || configuration.password)) {
+        object["auth"] = { username: configuration.username, password: configuration.password };
+    }
+}
+
+/**
+ *
+ * @export
+ */
+export const setBearerAuthToObject = async function (object: any, configuration?: Configuration) {
+    if (configuration && configuration.accessToken) {
+        const accessToken = typeof configuration.accessToken === 'function'
+            ? await configuration.accessToken()
+            : await configuration.accessToken;
+        object["Authorization"] = "Bearer " + accessToken;
+    }
+}
+
+/**
+ *
+ * @export
+ */
+export const setOAuthToObject = async function (object: any, name: string, scopes: string[], configuration?: Configuration) {
+    if (configuration && configuration.accessToken) {
+        const localVarAccessTokenValue = typeof configuration.accessToken === 'function'
+            ? await configuration.accessToken(name, scopes)
+            : await configuration.accessToken;
+        object["Authorization"] = "Bearer " + localVarAccessTokenValue;
+    }
+}
+
+function setFlattenedQueryParams(urlSearchParams: URLSearchParams, parameter: any, key: string = ""): void {
+    if (parameter == null) return;
+    if (typeof parameter === "object") {
+        if (Array.isArray(parameter)) {
+            (parameter as any[]).forEach(item => setFlattenedQueryParams(urlSearchParams, item, key));
+        } 
+        else {
+            Object.keys(parameter).forEach(currentKey => 
+                setFlattenedQueryParams(urlSearchParams, parameter[currentKey], `${key}${key !== '' ? '.' : ''}${currentKey}`)
+            );
+        }
+    } 
+    else {
+        if (urlSearchParams.has(key)) {
+            urlSearchParams.append(key, parameter);
+        } 
+        else {
+            urlSearchParams.set(key, parameter);
+        }
+    }
+}
+
+/**
+ *
+ * @export
+ */
+export const setSearchParams = function (url: URL, ...objects: any[]) {
+    const searchParams = new URLSearchParams(url.search);
+    setFlattenedQueryParams(searchParams, objects);
+    url.search = searchParams.toString();
+}
+
+/**
+ *
+ * @export
+ */
+export const serializeDataIfNeeded = function (value: any, requestOptions: any, configuration?: Configuration) {
+    const nonString = typeof value !== 'string';
+    const needsSerialization = nonString && configuration && configuration.isJsonMime
+        ? configuration.isJsonMime(requestOptions.headers['Content-Type'])
+        : nonString;
+    return needsSerialization
+        ? JSON.stringify(value !== undefined ? value : {})
+        : (value || "");
+}
+
+/**
+ *
+ * @export
+ */
+export const toPathString = function (url: URL) {
+    return url.pathname + url.search + url.hash
+}
+
+/**
+ *
+ * @export
+ */
+export const createRequestFunction = function (axiosArgs: RequestArgs, globalAxios: AxiosInstance, BASE_PATH: string, configuration?: Configuration) {
+    return <T = unknown, R = AxiosResponse<T>>(axios: AxiosInstance = globalAxios, basePath: string = BASE_PATH) => {
+        const axiosRequestArgs = {...axiosArgs.options, url: (axios.defaults.baseURL ? '' : configuration?.basePath ?? basePath) + axiosArgs.url};
+        return axios.request<T, R>(axiosRequestArgs);
+    };
+}
diff --git a/src/page/plugins/filetransfer/api/configuration.ts b/src/page/plugins/filetransfer/api/configuration.ts
new file mode 100644
index 00000000..48054398
--- /dev/null
+++ b/src/page/plugins/filetransfer/api/configuration.ts
@@ -0,0 +1,110 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * n.eko REST API
+ * Next Gen Renderer Browser.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export interface ConfigurationParameters {
+    apiKey?: string | Promise<string> | ((name: string) => string) | ((name: string) => Promise<string>);
+    username?: string;
+    password?: string;
+    accessToken?: string | Promise<string> | ((name?: string, scopes?: string[]) => string) | ((name?: string, scopes?: string[]) => Promise<string>);
+    basePath?: string;
+    serverIndex?: number;
+    baseOptions?: any;
+    formDataCtor?: new () => any;
+}
+
+export class Configuration {
+    /**
+     * parameter for apiKey security
+     * @param name security name
+     * @memberof Configuration
+     */
+    apiKey?: string | Promise<string> | ((name: string) => string) | ((name: string) => Promise<string>);
+    /**
+     * parameter for basic security
+     *
+     * @type {string}
+     * @memberof Configuration
+     */
+    username?: string;
+    /**
+     * parameter for basic security
+     *
+     * @type {string}
+     * @memberof Configuration
+     */
+    password?: string;
+    /**
+     * parameter for oauth2 security
+     * @param name security name
+     * @param scopes oauth2 scope
+     * @memberof Configuration
+     */
+    accessToken?: string | Promise<string> | ((name?: string, scopes?: string[]) => string) | ((name?: string, scopes?: string[]) => Promise<string>);
+    /**
+     * override base path
+     *
+     * @type {string}
+     * @memberof Configuration
+     */
+    basePath?: string;
+    /**
+     * override server index
+     *
+     * @type {number}
+     * @memberof Configuration
+     */
+    serverIndex?: number;
+    /**
+     * base options for axios calls
+     *
+     * @type {any}
+     * @memberof Configuration
+     */
+    baseOptions?: any;
+    /**
+     * The FormData constructor that will be used to create multipart form data
+     * requests. You can inject this here so that execution environments that
+     * do not support the FormData class can still run the generated client.
+     *
+     * @type {new () => FormData}
+     */
+    formDataCtor?: new () => any;
+
+    constructor(param: ConfigurationParameters = {}) {
+        this.apiKey = param.apiKey;
+        this.username = param.username;
+        this.password = param.password;
+        this.accessToken = param.accessToken;
+        this.basePath = param.basePath;
+        this.serverIndex = param.serverIndex;
+        this.baseOptions = param.baseOptions;
+        this.formDataCtor = param.formDataCtor;
+    }
+
+    /**
+     * Check if the given MIME is a JSON MIME.
+     * JSON MIME examples:
+     *   application/json
+     *   application/json; charset=UTF8
+     *   APPLICATION/JSON
+     *   application/vnd.company+json
+     * @param mime - MIME (Multipurpose Internet Mail Extensions)
+     * @return True if the given MIME is JSON, false otherwise.
+     */
+    public isJsonMime(mime: string): boolean {
+        const jsonMime: RegExp = new RegExp('^(application\/json|[^;/ \t]+\/[^;/ \t]+[+]json)[ \t]*(;.*)?$', 'i');
+        return mime !== null && (jsonMime.test(mime) || mime.toLowerCase() === 'application/json-patch+json');
+    }
+}
diff --git a/src/page/plugins/filetransfer/api/index.ts b/src/page/plugins/filetransfer/api/index.ts
new file mode 100644
index 00000000..77070e12
--- /dev/null
+++ b/src/page/plugins/filetransfer/api/index.ts
@@ -0,0 +1,18 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * n.eko REST API
+ * Next Gen Renderer Browser.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export * from "./api";
+export * from "./configuration";
+export * from "./models";
diff --git a/src/page/plugins/filetransfer/api/models/error-message.ts b/src/page/plugins/filetransfer/api/models/error-message.ts
new file mode 100644
index 00000000..8764dd5d
--- /dev/null
+++ b/src/page/plugins/filetransfer/api/models/error-message.ts
@@ -0,0 +1,30 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * n.eko REST API
+ * Next Gen Renderer Browser.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+
+/**
+ * 
+ * @export
+ * @interface ErrorMessage
+ */
+export interface ErrorMessage {
+    /**
+     * 
+     * @type {string}
+     * @memberof ErrorMessage
+     */
+    'message'?: string;
+}
+
diff --git a/src/page/plugins/filetransfer/api/models/index.ts b/src/page/plugins/filetransfer/api/models/index.ts
new file mode 100644
index 00000000..595296f1
--- /dev/null
+++ b/src/page/plugins/filetransfer/api/models/index.ts
@@ -0,0 +1 @@
+export * from './error-message';
diff --git a/src/page/plugins/filetransfer/component.vue b/src/page/plugins/filetransfer/component.vue
new file mode 100644
index 00000000..230b5437
--- /dev/null
+++ b/src/page/plugins/filetransfer/component.vue
@@ -0,0 +1,522 @@
+<template>
+  <div style="width: 100%">
+    <div class="files" v-if="tab === 'filetransfer'">
+      <div class="files-cwd">
+        <p>{{ enabled ? cwd  : 'Filetransfer is disabled' }}</p>
+        <i class="fas fa-rotate-right refresh" @click="refresh" />
+      </div>
+      <div class="files-list">
+        <div v-for="item in files" :key="item.name" class="files-list-item">
+          <i :class="fileIcon(item)" />
+          <p class="file-name" :title="item.name">{{ item.name }}</p>
+          <p class="file-size">{{ fileSize(item.size) }}</p>
+          <i v-if="item.type !== 'dir'" class="fas fa-download download" @click="download(item)" />
+        </div>
+      </div>
+      <div class="transfer-area" v-if="enabled">
+        <div class="transfers" v-if="transfers.length > 0">
+          <p v-if="downloads.length > 0" class="transfers-list-header">
+            <span> Downloads </span>
+            <i class="fas fa-xmark remove-transfer" @click="downloads.forEach((t) => removeTransfer(t))"></i>
+          </p>
+          <div v-for="download in downloads" :key="download.id" class="transfers-list-item">
+            <div class="transfer-info">
+              <i
+                class="fas transfer-status"
+                :class="{
+                  'fa-clock': download.status === 'pending',
+                  'fa-arrows-rotate': download.status === 'inprogress',
+                  'fa-check': download.status === 'completed',
+                  'fa-warning': download.status === 'failed',
+                }"
+              ></i>
+              <p class="file-name" :title="download.name">{{ download.name }}</p>
+              <p class="file-size">{{ Math.min(100, Math.round((download.progress / download.size) * 100)) }}%</p>
+              <i class="fas fa-xmark remove-transfer" @click="removeTransfer(download)"></i>
+            </div>
+            <div v-if="download.status === 'failed'" class="transfer-error">{{ download.error }}</div>
+            <progress
+              v-else
+              class="transfer-progress"
+              :aria-label="download.name + ' progress'"
+              :value="download.progress"
+              :max="download.size"
+            ></progress>
+          </div>
+          <p v-if="uploads.length > 0" class="transfers-list-header">
+            <span> Uploads </span>
+            <i class="fas fa-xmark remove-transfer" @click="uploads.forEach((t) => removeTransfer(t))"></i>
+          </p>
+          <div v-for="upload in uploads" :key="upload.id" class="transfers-list-item">
+            <div class="transfer-info">
+              <i
+                class="fas transfer-status"
+                :title="upload.status"
+                :class="{
+                  'fa-clock': upload.status === 'pending',
+                  'fa-arrows-rotate': upload.status === 'inprogress',
+                  'fa-check': upload.status === 'completed',
+                  'fa-warning': upload.status === 'failed',
+                }"
+              ></i>
+              <p class="file-name" :title="upload.name">{{ upload.name }}</p>
+              <p class="file-size">{{ Math.min(100, Math.round((upload.progress / upload.size) * 100)) }}%</p>
+              <i class="fas fa-xmark remove-transfer" @click="removeTransfer(upload)"></i>
+            </div>
+            <div v-if="upload.status === 'failed'" class="transfer-error">{{ upload.error }}</div>
+            <progress
+              v-else
+              class="transfer-progress"
+              :aria-label="upload.name + ' progress'"
+              :value="upload.progress"
+              :max="upload.size"
+            ></progress>
+          </div>
+        </div>
+        <div
+          class="upload-area"
+          :class="{ 'upload-area-drag': uploadAreaDrag }"
+          @dragover.prevent="uploadAreaDrag = true"
+          @dragleave.prevent="uploadAreaDrag = false"
+          @drop.prevent="(e) => upload(e.dataTransfer)"
+          @click="openFileBrowser"
+        >
+          <i class="fas fa-file-arrow-up" />
+          <p> Drop files here to upload </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import '@/page/assets/styles/main.scss';
+
+  .files {
+    flex: 1;
+    flex-direction: column;
+    display: flex;
+    max-width: 100%;
+
+    .files-cwd {
+      display: flex;
+      flex-direction: row;
+      margin: 10px 10px 0px 10px;
+      padding: 0.5em;
+      font-weight: 600;
+      background-color: rgba($color: #fff, $alpha: 0.05);
+      border-radius: 5px;
+    }
+
+    .files-list {
+      margin: 10px 10px 10px 10px;
+      background-color: rgba($color: #fff, $alpha: 0.05);
+      border-radius: 5px;
+      overflow-y: scroll;
+      scrollbar-width: thin;
+      scrollbar-color: $background-tertiary transparent;
+
+      &::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: $background-tertiary;
+        border: 2px solid $background-primary;
+        border-radius: 4px;
+      }
+
+      &::-webkit-scrollbar-thumb:hover {
+        background-color: $background-floating;
+      }
+    }
+
+    .files-list-item {
+      padding: 0.5em;
+      border-bottom: 2px solid rgba($color: #fff, $alpha: 0.1);
+      display: flex;
+      flex-direction: row;
+      line-height: 1.2;
+    }
+
+    .transfers-list-header {
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 2px solid rgba($color: #fff, $alpha: 0.1);
+    }
+
+    .file-icon,
+    .transfer-status {
+      width: 14px;
+      margin-right: 0.5em;
+    }
+
+    .transfer-error {
+      border: 1px solid $style-error;
+      border-radius: 5px;
+      padding: 10px;
+    }
+
+    .files-list-item:last-child {
+      border-bottom: 0px;
+    }
+
+    .refresh {
+      margin-left: auto;
+    }
+
+    .file-name {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    .file-size {
+      margin-left: auto;
+      margin-right: 0.5em;
+      color: rgba($color: #fff, $alpha: 0.4);
+      white-space: nowrap;
+    }
+
+    .refresh:hover,
+    .download:hover,
+    .remove-transfer:hover {
+      cursor: pointer;
+    }
+
+    .transfer-area {
+      margin-top: auto;
+    }
+
+    .transfers {
+      margin: 10px 10px 10px 10px;
+      background-color: rgba($color: #fff, $alpha: 0.05);
+      border-radius: 5px;
+      max-height: 50vh;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-width: thin;
+      scrollbar-color: $background-tertiary transparent;
+
+      &::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: $background-tertiary;
+        border: 2px solid $background-primary;
+        border-radius: 4px;
+      }
+
+      &::-webkit-scrollbar-thumb:hover {
+        background-color: $background-floating;
+      }
+    }
+
+    .transfers > p {
+      padding: 10px;
+      font-weight: 600;
+    }
+
+    .transfer-info {
+      display: flex;
+      flex-direction: row;
+      max-width: 100%;
+      padding: 10px;
+    }
+
+    .transfer-progress {
+      margin: 0px 10px 10px 10px;
+      width: 95%;
+    }
+
+    .upload-area {
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+      justify-content: center;
+      margin: 10px 10px 10px 10px;
+      background-color: rgba($color: #fff, $alpha: 0.05);
+      border-radius: 5px;
+    }
+
+    .upload-area:hover {
+      cursor: pointer;
+    }
+
+    .upload-area-drag,
+    .upload-area:hover {
+      background-color: rgba($color: #fff, $alpha: 0.1);
+    }
+
+    .upload-area > i {
+      font-size: 4em;
+      margin: 10px 10px 10px 10px;
+    }
+
+    .upload-area > p {
+      margin: 0px 10px 10px 10px;
+    }
+  }
+</style>
+
+<script lang="ts" setup>
+import { ref, reactive, computed, onMounted } from 'vue'
+import Neko from '@/component/main.vue'
+import type { FileTransfer, Message, Item } from './types'
+import { FILETRANSFER_UPDATE } from './types'
+import { FiletransferApi } from './api'
+import * as ApiModels from './api/models'
+
+const props = defineProps<{
+  neko: typeof Neko
+  tab: string
+}>()
+
+const api = props.neko.withApi(FiletransferApi) as FiletransferApi
+
+const enabled = ref(false)
+const cwd = ref('')
+const files = ref<Item[]>([])
+const transfers = reactive<FileTransfer[]>([])
+const uploadAreaDrag = ref(false)
+
+const downloads = computed(() => transfers.filter((t) => t.direction === 'download'))
+const uploads = computed(() => transfers.filter((t) => t.direction === 'upload'))
+
+onMounted(async () => {
+  props.neko.events.on('message', async (event: string, payload: any) => {
+    switch (event) {
+      case FILETRANSFER_UPDATE:
+        const msg = payload as Message
+        enabled.value = msg.enabled
+        cwd.value = msg.root_dir
+        files.value = msg.files
+        break
+    }
+  })
+})
+
+function refresh() {
+  props.neko.sendMessage(FILETRANSFER_UPDATE)
+}
+
+function download(item: Item) {
+  // check if download is already in progress
+  if (downloads.value.map((t) => t.name).includes(item.name)) {
+    return
+  }
+
+  const abortController = new AbortController()
+
+  const pushedIndex = transfers.push({
+    id: Math.round(Math.random() * 10000),
+    name: item.name,
+    direction: 'download',
+    // this may be smaller than the actual transfer amount, but for large files the
+    // content length is not sent (chunked transfer)
+    size: item.size,
+    progress: 0,
+    status: 'pending',
+    abortController: abortController,
+  }) - 1
+
+  api.downloadFile(item.name, {
+    responseType: 'blob',
+    signal: abortController.signal,
+    withCredentials: false,
+    onDownloadProgress: (x) => {
+      const transfer = transfers[pushedIndex]
+      transfer.progress = x.loaded
+
+      if (x.total && transfer.size !== x.total) {
+        transfer.size = x.total
+      }
+      if (transfer.progress === transfer.size) {
+        transfer.status = 'completed'
+      } else if (transfer.status !== 'inprogress') {
+        transfer.status = 'inprogress'
+      }
+
+      console.log(transfer.progress, transfer.size)
+    },
+  })
+  .then((res) => {
+    const url = window.URL.createObjectURL(new Blob([res.data]))
+    const link = document.createElement('a')
+    link.href = url
+    link.setAttribute('download', item.name)
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+
+    const transfer = transfers[pushedIndex]
+    transfer.progress = transfer.size
+    transfer.status = 'completed'
+    console.log('download completed', transfer.size)
+  })
+  .catch((error) => {
+    console.error(error)
+
+    const transfer = transfers[pushedIndex]
+    transfer.status = 'failed'
+    transfer.error = error.message
+  })
+}
+
+function upload(dt: DataTransfer | null) {
+  if (dt === null) return
+
+  uploadAreaDrag.value = false
+
+  for (const file of dt.files) {
+    const abortController = new AbortController()
+
+    const pushedIndex = transfers.push({
+      id: Math.round(Math.random() * 10000),
+      name: file.name,
+      direction: 'upload',
+      size: file.size,
+      progress: 0,
+      status: 'pending',
+      abortController: abortController,
+    }) - 1
+
+    api.uploadFile([file], {
+      signal: abortController.signal,
+      withCredentials: false,
+      onUploadProgress: (x: any) => {
+        const transfer = transfers[pushedIndex]
+        transfer.progress = x.loaded
+
+        if (transfer.size !== x.total) {
+          transfer.size = x.total
+        }
+        if (transfer.progress === transfer.size) {
+          transfer.status = 'completed'
+        } else if (transfer.status !== 'inprogress') {
+          transfer.status = 'inprogress'
+        }
+      },
+    })
+    .catch((error) => {
+      console.error(error)
+
+      const transfer = transfers[pushedIndex]
+      transfer.status = 'failed'
+      transfer.error = error.message
+    })
+  }
+}
+
+function openFileBrowser() {
+  const input = document.createElement('input')
+  input.type = 'file'
+  input.setAttribute('multiple', 'true')
+  input.onchange = (e: Event) => {
+    if (e === null) return
+
+    const dt = new DataTransfer()
+    const target = e.target as HTMLInputElement
+    if (target.files === null) return
+
+    for (const f of target.files) {
+      dt.items.add(f)
+    }
+
+    upload(dt)
+  }
+  input.click()
+}
+
+function removeTransfer(transfer: FileTransfer) {
+  if (transfer.status !== 'completed') {
+    transfer.abortController?.abort()
+  }
+  transfers.splice(transfers.indexOf(transfer), 1)
+}
+
+function fileIcon(file: Item) {
+  let className = 'file-icon fas '
+  // if is directory
+  if (file.type === 'dir') {
+    className += 'fa-folder'
+    return className
+  }
+  // try to get file extension
+  const ext = file.name.split('.').pop()
+  if (ext === undefined) {
+    className += 'fa-file'
+    return className
+  }
+  // try to find icon
+  switch (ext.toLowerCase()) {
+    case 'txt':
+    case 'md':
+      className += 'fa-file-text'
+      break
+    case 'pdf':
+      className += 'fa-file-pdf'
+      break
+    case 'zip':
+    case 'rar':
+    case '7z':
+    case 'gz':
+      className += 'fa-archive'
+      break
+    case 'aac':
+    case 'flac':
+    case 'midi':
+    case 'mp3':
+    case 'ogg':
+    case 'wav':
+      className += 'fa-music'
+      break
+    case 'avi':
+    case 'mkv':
+    case 'mov':
+    case 'mpeg':
+    case 'mp4':
+    case 'webm':
+      className += 'fa-film'
+      break
+    case 'bmp':
+    case 'gif':
+    case 'jpeg':
+    case 'jpg':
+    case 'png':
+    case 'svg':
+    case 'tiff':
+    case 'webp':
+      className += 'fa-image'
+      break
+    default:
+      className += 'fa-file'
+  }
+  return className
+}
+
+function fileSize(size: number) {
+  if (size < 1024) {
+    return size + ' B'
+  }
+  if (size < 1024 * 1024) {
+    return Math.round(size / 1024) + ' KB'
+  }
+  if (size < 1024 * 1024 * 1024) {
+    return Math.round(size / (1024 * 1024)) + ' MB'
+  }
+  if (size < 1024 * 1024 * 1024 * 1024) {
+    return Math.round(size / (1024 * 1024 * 1024)) + ' GB'
+  }
+  return Math.round(size / (1024 * 1024 * 1024 * 1024)) + ' TB'
+}
+</script>
diff --git a/src/page/plugins/filetransfer/index.ts b/src/page/plugins/filetransfer/index.ts
new file mode 100644
index 00000000..8d2618af
--- /dev/null
+++ b/src/page/plugins/filetransfer/index.ts
@@ -0,0 +1,7 @@
+import Components from './component.vue'
+import Tabs from './tab.vue'
+
+export {
+  Components,
+  Tabs,
+}
diff --git a/src/page/plugins/filetransfer/tab.vue b/src/page/plugins/filetransfer/tab.vue
new file mode 100644
index 00000000..91ca7b9e
--- /dev/null
+++ b/src/page/plugins/filetransfer/tab.vue
@@ -0,0 +1,18 @@
+<template>
+  <span>
+    <li :class="{ active: tab === 'filetransfer' }" @click.prevent="emit('tab', 'filetransfer')">
+      <i class="fas fa-file"></i>
+      <span v-show="tab === 'filetransfer'">Filetransfer</span>
+    </li>
+  </span>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  tab: string
+}>()
+
+const emit = defineEmits<{
+  (event: 'tab', tab: string): void
+}>()
+</script>
diff --git a/src/page/plugins/filetransfer/types.ts b/src/page/plugins/filetransfer/types.ts
new file mode 100644
index 00000000..24d74db8
--- /dev/null
+++ b/src/page/plugins/filetransfer/types.ts
@@ -0,0 +1,26 @@
+export const FILETRANSFER_UPDATE = "filetransfer/update"
+
+export interface Message {
+	enabled: boolean
+	root_dir: string
+	files: Item[]
+}
+
+type ItemType = "file" | "dir"
+
+export interface Item {
+  name: string
+  type: ItemType
+  size: number
+}
+
+export interface FileTransfer {
+  id: number
+  name: string
+  direction: 'upload' | 'download'
+  size: number
+  progress: number
+  status: 'pending' | 'inprogress' | 'completed' | 'failed'
+  error?: string
+  abortController?: AbortController
+}