diff --git a/packages/file-handling/.gitignore b/packages/file-handling/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..e62f92aa809c7345cb05914d7143b0322ab6d725
--- /dev/null
+++ b/packages/file-handling/.gitignore
@@ -0,0 +1,5 @@
+dist
+node_modules
+.idea
+npm-debug.log
+package-lock.json
diff --git a/packages/file-handling/.gitlab-ci.yml b/packages/file-handling/.gitlab-ci.yml
new file mode 100644
index 0000000000000000000000000000000000000000..9cadb871dc906edde0c952330b3a14f0b5767a58
--- /dev/null
+++ b/packages/file-handling/.gitlab-ci.yml
@@ -0,0 +1,20 @@
+image: debian:buster
+
+before_script:
+ - apt update
+ - apt install -y git
+ - "sed -i 's|git@gitlab.tugraz.at:VPU|../..|g' .gitmodules"
+ - git submodule sync
+ - git submodule update --init
+
+stages:
+ - test
+
+test:
+ stage: test
+ script:
+ - apt update
+ - apt install -y npm chromium
+ - npm install
+ - npm run build
+ - npm test
diff --git a/packages/file-handling/.gitmodules b/packages/file-handling/.gitmodules
new file mode 100644
index 0000000000000000000000000000000000000000..d423707d751b13b5f0d8462cdba7290860dac1e7
--- /dev/null
+++ b/packages/file-handling/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "vendor/common"]
+ path = vendor/common
+ url = git@gitlab.tugraz.at:VPU/WebComponents/Common.git
diff --git a/packages/file-handling/README.md b/packages/file-handling/README.md
index 0414e52cb8529c31c47cd81468ee8d12c52d3363..4fcd80e09a31b44d715b7bc443a326ed709faf9c 100644
--- a/packages/file-handling/README.md
+++ b/packages/file-handling/README.md
@@ -1,3 +1,33 @@
-# FileUpload
+# VPU FileUpload web component
-VPU FileUpload web component
\ No newline at end of file
+[GitLab Repository](https://gitlab.tugraz.at/VPU/WebComponents/FileUpload)
+
+## Usage
+
+```html
+<vpu-fileupload></vpu-fileupload>
+```
+
+## Attributes
+
+- `url`: path to the upload url
+ - example `<vpu-fileupload url="path/to/my/page"></vpu-fileupload>`
+- `lang` (optional, default: `de`): set to `de` or `en` for German or English
+ - example `<vpu-fileupload lang="de"></vpu-fileupload>`
+
+## Local development
+
+```bash
+# get the source
+git clone git@gitlab.tugraz.at:VPU/WebComponents/FileUpload.git
+cd FileUpload
+git submodule update --init
+
+# install dependencies (make sure you have npm version 4+ installed, so symlinks to the git submodules are created automatically)
+npm install
+
+# constantly build dist/bundle.js and run a local web-server on port 8002
+npm run watch-local
+```
+
+Jump to <http://localhost:8002> and you should get a demo page.
diff --git a/packages/file-handling/assets/favicon.ico b/packages/file-handling/assets/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..f6cf22d1afc22f071d2b64c7779bc5214c3adae5
Binary files /dev/null and b/packages/file-handling/assets/favicon.ico differ
diff --git a/packages/file-handling/assets/index.html b/packages/file-handling/assets/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..858fbdaac68c66e545074c1db5061a38d66c3fa2
--- /dev/null
+++ b/packages/file-handling/assets/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <script type="module" id="vpu-fileupload-src" src="bundle.js"></script>
+</head>
+<style>
+ vpu-fileupload-demo {
+ --FUBorderRadius: 10px;
+ --FUBorder: 2px dashed red;
+ --FUMargin: 20px;
+ --FUPadding: 5px;
+ }
+</style>
+<body>
+
+<vpu-fileupload-demo lang="de" url="http://127.0.0.1:8080"></vpu-fileupload-demo>
+
+</body>
+</html>
diff --git a/packages/file-handling/i18next-scanner.config.js b/packages/file-handling/i18next-scanner.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..8c277798414be902846c6eb4f0e95a19750cda39
--- /dev/null
+++ b/packages/file-handling/i18next-scanner.config.js
@@ -0,0 +1,15 @@
+module.exports = {
+ input: [
+ 'src/*.js',
+ ],
+ output: './',
+ options: {
+ debug: false,
+ removeUnusedKeys: true,
+ lngs: ['en','de'],
+ resource: {
+ loadPath: 'src/i18n/{{lng}}/{{ns}}.json',
+ savePath: 'src/i18n/{{lng}}/{{ns}}.json'
+ },
+ },
+}
diff --git a/packages/file-handling/karma.conf.js b/packages/file-handling/karma.conf.js
new file mode 100644
index 0000000000000000000000000000000000000000..6a646f5ec9ea5a6c50dd25dc6038dd94fff1bc43
--- /dev/null
+++ b/packages/file-handling/karma.conf.js
@@ -0,0 +1,23 @@
+// Trick to use the auto-downloaded puppeteer chrome binary
+process.env.CHROME_BIN = require('puppeteer').executablePath();
+
+module.exports = function(config) {
+ config.set({
+ basePath: 'dist',
+ frameworks: ['mocha', 'chai'],
+ files: [
+ {pattern: './*.js', included: true, watched: true, served: true, type: 'module'},
+ {pattern: './**/*', included: false, watched: true, served: true},
+ ],
+ autoWatch: true,
+ browsers: ['ChromeHeadlessNoSandbox'],
+ customLaunchers: {
+ ChromeHeadlessNoSandbox: {
+ base: 'ChromeHeadless',
+ flags: ['--no-sandbox']
+ }
+ },
+ singleRun: false,
+ logLevel: config.LOG_ERROR
+ });
+}
diff --git a/packages/file-handling/package.json b/packages/file-handling/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..5161f5e8812afa47290252ac571cbe3e933b5208
--- /dev/null
+++ b/packages/file-handling/package.json
@@ -0,0 +1,49 @@
+{
+ "name": "vpu-fileupload",
+ "version": "1.0.0",
+ "main": "src/index.js",
+ "devDependencies": {
+ "chai": "^4.2.0",
+ "i18next-scanner": "^2.10.2",
+ "karma": "^4.2.0",
+ "karma-chai": "^0.1.0",
+ "karma-chrome-launcher": "^3.0.0",
+ "karma-mocha": "^1.3.0",
+ "mocha": "^6.2.0",
+ "node-sass": "^4.12.0",
+ "puppeteer": "^1.15.0",
+ "rollup": "^1.20.0",
+ "rollup-plugin-commonjs": "^10.0.2",
+ "rollup-plugin-consts": "^1.0.1",
+ "rollup-plugin-copy": "^3.1.0",
+ "rollup-plugin-delete": "^1.1.0",
+ "rollup-plugin-json": "^4.0.0",
+ "rollup-plugin-multi-entry": "^2.1.0",
+ "rollup-plugin-node-resolve": "^5.2.0",
+ "rollup-plugin-postcss": "^2.0.3",
+ "rollup-plugin-replace": "^2.2.0",
+ "rollup-plugin-serve": "^1.0.1",
+ "rollup-plugin-terser": "^5.1.1",
+ "vpu-common": "file:./vendor/common"
+ },
+ "dependencies": {
+ "i18next": "^17.0.3",
+ "lit-element": "^2.1.0",
+ "lit-html": "^1.1.1",
+ "material-design-icons-svg": "^3.0.0"
+ },
+ "scripts": {
+ "clean": "rm dist/*",
+ "build": "npm run build-local",
+ "build-local": "rollup -c",
+ "build-dev": "rollup -c --environment BUILD:development",
+ "build-prod": "rollup -c --environment BUILD:production",
+ "build-demo": "rollup -c --environment BUILD:demo",
+ "build-test": "rollup -c --environment BUILD:test",
+ "i18next": "i18next-scanner",
+ "watch": "npm run watch-local",
+ "watch-local": "rollup -c --watch",
+ "watch-dev": "rollup -c --watch --environment BUILD:development",
+ "test": "npm run build-test && karma start --singleRun"
+ }
+}
diff --git a/packages/file-handling/rollup.config.js b/packages/file-handling/rollup.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..69b00edea376dea4273bb77c3be7f2a280d9f696
--- /dev/null
+++ b/packages/file-handling/rollup.config.js
@@ -0,0 +1,49 @@
+import path from 'path';
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import copy from 'rollup-plugin-copy';
+import {terser} from "rollup-plugin-terser";
+import json from 'rollup-plugin-json';
+import serve from 'rollup-plugin-serve';
+import multiEntry from 'rollup-plugin-multi-entry';
+import consts from 'rollup-plugin-consts';
+import del from 'rollup-plugin-delete';
+
+const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
+console.log("build: " + build);
+
+export default {
+ input: (build !== 'test') ? 'src/demo.js' : 'test/**/*.js',
+ output: {
+ file: 'dist/bundle.js',
+ format: 'esm'
+ },
+ plugins: [
+ del({
+ targets: 'dist/*'
+ }),
+ multiEntry(),
+ consts({
+ environment: build,
+ }),
+ resolve({
+ customResolveOptions: {
+ // ignore node_modules from vendored packages
+ moduleDirectory: path.join(process.cwd(), 'node_modules')
+ }
+ }),
+ commonjs({
+ include: 'node_modules/**'
+ }),
+ json(),
+ (build !== 'local' && build !== 'test') ? terser() : false,
+ copy({
+ targets: [
+ {src: 'assets/index.html', dest: 'dist'},
+ {src: 'assets/favicon.ico', dest: 'dist'},
+ {src: 'node_modules/material-design-icons-svg/paths/*.json', dest: 'dist/local/vpu-common/icons'},
+ ],
+ }),
+ (process.env.ROLLUP_WATCH === 'true') ? serve({contentBase: 'dist', host: '127.0.0.1', port: 8002}) : false
+ ]
+};
diff --git a/packages/file-handling/src/demo.js b/packages/file-handling/src/demo.js
new file mode 100644
index 0000000000000000000000000000000000000000..3f705072aa7cdc24bf7c8baaaa480af493b28678
--- /dev/null
+++ b/packages/file-handling/src/demo.js
@@ -0,0 +1,63 @@
+import {i18n} from './i18n';
+import {html, LitElement} from 'lit-element';
+import './vpu-fileupload';
+import * as commonUtils from 'vpu-common/utils';
+
+class FileUploadDemo extends LitElement {
+ constructor() {
+ super();
+ this.lang = 'de';
+ this.url = '';
+ }
+
+ static get properties() {
+ return {
+ lang: { type: String },
+ url: { type: String },
+ };
+ }
+
+ update(changedProperties) {
+ changedProperties.forEach((oldValue, propName) => {
+ if (propName === "lang") {
+ i18n.changeLanguage(this.lang);
+ }
+ });
+
+ super.update(changedProperties);
+ }
+
+ render() {
+ return html`
+ <style>
+ vpu-fileupload.clean {
+ --FUBorder: initial;
+ --FUBorderRadius: initial;
+ --FUMargin: initial;
+ --FUPadding: initial;
+ }
+ vpu-fileupload.opt {
+ --FUBorder: 2px solid blue;
+ }
+ </style>
+
+ <section class="section">
+ <div class="content">
+ <h1 class="title">File-Upload-Demo</h1>
+ <p>You need an upload server listening at <tt>${this.url}</tt> to receive the files...</p>
+ </div>
+ <div class="content">
+ <h2 class="subtitle">Send to Server</h2>
+ <p>Drop some files here:</p>
+ <vpu-fileupload lang="de" url="${this.url}"></vpu-fileupload>
+ </div>
+ <div class="content">
+ <h2>Log of uploads</h2>
+ <ul id="log"></ul>
+ </div>
+ </section>
+ `;
+ }
+}
+
+commonUtils.defineCustomElement('vpu-fileupload-demo', FileUploadDemo);
diff --git a/packages/file-handling/src/i18n.js b/packages/file-handling/src/i18n.js
new file mode 100644
index 0000000000000000000000000000000000000000..02c88eb4fd48d17e453af6166addcd7583e92479
--- /dev/null
+++ b/packages/file-handling/src/i18n.js
@@ -0,0 +1,6 @@
+import {createInstance} from 'vpu-common/i18next.js';
+
+import de from './i18n/de/translation.json';
+import en from './i18n/en/translation.json';
+
+export const i18n = createInstance({en: en, de: de}, 'de', 'en');
\ No newline at end of file
diff --git a/packages/file-handling/src/i18n/de/translation.json b/packages/file-handling/src/i18n/de/translation.json
new file mode 100644
index 0000000000000000000000000000000000000000..6e81531dca5285b89ec941d0a30b28d611839b00
--- /dev/null
+++ b/packages/file-handling/src/i18n/de/translation.json
@@ -0,0 +1,7 @@
+{
+ "error-head": "FEHLER: Information",
+ "is-forbidden": "ist verboten",
+ "troubled-server": "macht Probleme am Server",
+ "unknown-problems": "mit unbekanntem Problem",
+ "was-not-found": "wurde nicht gefunden"
+}
diff --git a/packages/file-handling/src/i18n/en/translation.json b/packages/file-handling/src/i18n/en/translation.json
new file mode 100644
index 0000000000000000000000000000000000000000..05eb31df511ec6c271e18d96dd2bdd94045f7170
--- /dev/null
+++ b/packages/file-handling/src/i18n/en/translation.json
@@ -0,0 +1,7 @@
+{
+ "error-head": "ERROR: information",
+ "is-forbidden": "is forbidden",
+ "troubled-server": "troubled server",
+ "unknown-problems": "with unknown problems",
+ "was-not-found": "was not found"
+}
diff --git a/packages/file-handling/src/index.js b/packages/file-handling/src/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..c986b9a95cb3d2be3b3605cb6797824c1cb7b1c7
--- /dev/null
+++ b/packages/file-handling/src/index.js
@@ -0,0 +1 @@
+import './vpu-fileupload';
diff --git a/packages/file-handling/src/vpu-fileupload.js b/packages/file-handling/src/vpu-fileupload.js
new file mode 100644
index 0000000000000000000000000000000000000000..b629a7945bfbe8ee7d4f7b4181dfd276d039f1f5
--- /dev/null
+++ b/packages/file-handling/src/vpu-fileupload.js
@@ -0,0 +1,97 @@
+import {i18n} from './i18n';
+import {html} from 'lit-element';
+// import JSONLD from 'vpu-common/jsonld';
+import VPULitElement from 'vpu-common/vpu-lit-element'
+import "vpu-common/vpu-mini-spinner.js";
+import * as commonUtils from "vpu-common/utils";
+import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
+import 'vpu-common/vpu-icon.js';
+
+/**
+ * KnowledgeBaseWebPageElementView web component
+ */
+class VPUFileUpload extends VPULitElement {
+ constructor() {
+ super();
+ this.lang = 'de';
+ this.url = '';
+ }
+
+ /**
+ * See: https://lit-element.polymer-project.org/guide/properties#initialize
+ */
+ static get properties() {
+ return {
+ lang: { type: String },
+ url: { type: String },
+ };
+ }
+
+
+ update(changedProperties) {
+ changedProperties.forEach((oldValue, propName) => {
+ if (propName === "lang") {
+ i18n.changeLanguage(this.lang);
+ }
+ });
+
+ super.update(changedProperties);
+ }
+
+
+ render() {
+ return html`
+ <style>
+ #drop-area {
+ border: 2px dashed #ccc;
+ border-radius: 20px;
+ width: 480px;
+ font-family: sans-serif;
+ margin: 100px auto;
+ padding: 20px;
+ }
+ #drop-area.highlight {
+ border-color: purple;
+ }
+ p {
+ margin-top: 0;
+ }
+ .my-form {
+ margin-bottom: 10px;
+ }
+ #gallery {
+ margin-top: 10px;
+ }
+ #gallery img {
+ width: 150px;
+ margin-bottom: 10px;
+ margin-right: 10px;
+ vertical-align: middle;
+ }
+ .button {
+ display: inline-block;
+ padding: 10px;
+ background: #ccc;
+ cursor: pointer;
+ border-radius: 5px;
+ border: 1px solid #ccc;
+ }
+ .button:hover {
+ background: #ddd;
+ }
+ #fileElem {
+ display: none;
+ }
+ </style>
+ <div id="drop-area">
+ <form class="my-form">
+ <p>Upload multiple files with the file dialog or by dragging and dropping images onto the dashed region</p>
+ <input type="file" id="fileElem" multiple accept="image/*" name='my_file' onchange="handleFiles(this.files)">
+ <label class="button" for="fileElem">Select some files</label>
+ </form>
+ </div>
+ `;
+ }
+}
+
+commonUtils.defineCustomElement('vpu-fileupload', VPUFileUpload);
diff --git a/packages/file-handling/vendor/common b/packages/file-handling/vendor/common
new file mode 160000
index 0000000000000000000000000000000000000000..5aa64ec47e7b65d69327f4dec1102917fe33bd22
--- /dev/null
+++ b/packages/file-handling/vendor/common
@@ -0,0 +1 @@
+Subproject commit 5aa64ec47e7b65d69327f4dec1102917fe33bd22