diff --git a/package-lock.json b/package-lock.json
index 25efe0df058a76afbc33b99300d2378657e46cc9..570fb03e850aeb126ad01d5a9581b8a0bb66cd73 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,6 +40,7 @@
         "mermaid": "^9.1.3",
         "ng2-charts": "^4.1.1",
         "ngx-markdown": "^15.1.2",
+        "ngx-material-file-input": "^4.0.1",
         "ngx-webstorage-service": "^5.0.0",
         "pako": "^2.0.4",
         "primeng": "^15.4.1",
@@ -47,7 +48,6 @@
         "rxjs": "^7.5.5",
         "screenfull": "^6.0.2",
         "svg-pan-zoom": "^3.6.1",
-        "tslib": "^2.4.0",
         "webdriver-manager": "^12.1.9",
         "xlsx": "^0.18.5",
         "zone.js": "~0.11.6"
@@ -81,6 +81,7 @@
         "jasmine-core": "~4.2.0",
         "jasmine-spec-reporter": "~7.0.0",
         "ts-node": "^10.8.2",
+        "tslib": "^2.6.2",
         "typescript": "^4.8.2",
         "wdio-wait-for": "^3.0.10",
         "webpack-dev-server": "^4.9.3"
@@ -18181,6 +18182,20 @@
         "zone.js": "~0.11.4 || ~0.12.0 || ~0.13.0"
       }
     },
+    "node_modules/ngx-material-file-input": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/ngx-material-file-input/-/ngx-material-file-input-4.0.1.tgz",
+      "integrity": "sha512-syYvwlAdbiUkXFRQENfJSYErQLzRY0xnUIIDgwMeOw8uIZp+FyuTrFpOqA2yBVumi/EKdi4afv6fSHrNwrKvbg==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/cdk": "^14.0.0",
+        "@angular/common": "^14.0.0",
+        "@angular/core": "^14.0.0",
+        "@angular/material": "^14.0.0"
+      }
+    },
     "node_modules/ngx-webstorage-service": {
       "version": "5.0.0",
       "license": "MIT",
@@ -23475,7 +23490,8 @@
     },
     "node_modules/tslib": {
       "version": "2.6.2",
-      "license": "0BSD"
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/tslint": {
       "version": "6.1.3",
diff --git a/package.json b/package.json
index ccce8ce1bd5f256d3a714ed14e7b3ed171a15c7a..b8425f58aac93cd865b2376e8d04258fb09f4b69 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
     "mermaid": "^9.1.3",
     "ng2-charts": "^4.1.1",
     "ngx-markdown": "^15.1.2",
+    "ngx-material-file-input": "^4.0.1",
     "ngx-webstorage-service": "^5.0.0",
     "pako": "^2.0.4",
     "primeng": "^15.4.1",
@@ -77,7 +78,6 @@
     "rxjs": "^7.5.5",
     "screenfull": "^6.0.2",
     "svg-pan-zoom": "^3.6.1",
-    "tslib": "^2.4.0",
     "webdriver-manager": "^12.1.9",
     "xlsx": "^0.18.5",
     "zone.js": "~0.11.6"
@@ -111,8 +111,9 @@
     "jasmine-core": "~4.2.0",
     "jasmine-spec-reporter": "~7.0.0",
     "ts-node": "^10.8.2",
+    "tslib": "^2.6.2",
     "typescript": "^4.8.2",
     "wdio-wait-for": "^3.0.10",
     "webpack-dev-server": "^4.9.3"
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8ea07f480d1e9a7b35795758fcc89d3fbb80a16a..84b9c563c459db18288f13dda744e4fc0075e7a6 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -23,14 +23,14 @@ import { MatLegacyTableModule as MatTableModule } from "@angular/material/legacy
 import { MatLegacyTabsModule as MatTabsModule } from "@angular/material/legacy-tabs";
 import { MatToolbarModule } from "@angular/material/toolbar";
 import { MatLegacyTooltipModule as MatTooltipModule } from "@angular/material/legacy-tooltip";
-import { MatExpansionModule } from '@angular/material/expansion';
+import { MatExpansionModule } from "@angular/material/expansion";
 
 import { DragDropModule } from "@angular/cdk/drag-drop";
 
 import { TableModule } from "primeng/table";
 import { MarkdownModule, MarkedOptions } from "ngx-markdown";
 
-import { FlexLayoutModule } from '@ngbracket/ngx-layout';
+import { FlexLayoutModule } from "@ngbracket/ngx-layout";
 import {
     CustomBreakPointsProvider,
     FlexGtXxsShowHideDirective,
@@ -123,10 +123,11 @@ import { DialogConfirmLoadSessionURLComponent } from "./components/dialog-confir
 import { BasinFieldsetContainerComponent } from "./components/basin-fieldset-container/basin-fieldset-container.component";
 import { PrebarrageService } from "./services/prebarrage.service";
 import { SelectSectionDetailsComponent } from "./components/select-section-details/select-section-details.component";
-import { ServiceWorkerModule } from '@angular/service-worker';
-import { environment } from '../environments/environment';
+import { ServiceWorkerModule } from "@angular/service-worker";
+import { environment } from "../environments/environment";
 import { ServiceWorkerUpdateService } from "./services/service-worker-update.service";
 import { UserConfirmationService } from "./services/user-confirmation.service";
+import { MaterialFileInputModule } from "ngx-material-file-input";
 
 const appRoutes: Routes = [
     { path: "list/search", component: CalculatorListComponent },
@@ -180,6 +181,7 @@ const appRoutes: Routes = [
         MatToolbarModule,
         MatTooltipModule,
         MatExpansionModule,
+        MaterialFileInputModule,
         NgxMatomoTrackerModule.forRoot({
             // Matomo open-source Web analytics
             siteId: 1,
@@ -190,11 +192,11 @@ const appRoutes: Routes = [
             enableTracing: false
         }),
         TableModule,
-        ServiceWorkerModule.register('ngsw-worker.js', {
-          enabled: environment.production,
-          // Register the ServiceWorker as soon as the application is stable
-          // or after 30 seconds (whichever comes first).
-          registrationStrategy: 'registerWhenStable:30000'
+        ServiceWorkerModule.register("ngsw-worker.js", {
+            enabled: environment.production,
+            // Register the ServiceWorker as soon as the application is stable
+            // or after 30 seconds (whichever comes first).
+            registrationStrategy: "registerWhenStable:30000"
         })
     ],
     declarations: [