diff --git a/example_files/example.xmlocel b/example_files/example.xmlocel
new file mode 100644
index 0000000000000000000000000000000000000000..6ee01856a8e95e53674c847f4983d76dce95404c
--- /dev/null
+++ b/example_files/example.xmlocel
@@ -0,0 +1,33 @@
+<log>
+  <event-types>
+    <event-type name="create-order">
+      <attributes>
+        <attribute name="total-items" type="integer"/>
+      </attributes>
+    </event-type>
+  </event-types>
+  <object-types>
+    <object-type name="order">
+      <attributes>
+        <attribute name="item" type="integer"/>
+      </attributes>
+    </object-type>
+  </object-types>
+  <events>
+    <event id="e1" type="create-order" time="2023-10-16T15:30:00Z">
+      <attributes>
+        <attribute name="total-items">1</attribute>
+      </attributes>
+      <objects>
+        <relationship object-id="o1" relationship="order"/>
+      </objects>
+    </event>
+  </events>
+  <objects>
+    <object id="o1" type="order">
+      <attributes>
+        <attribute name="item" time="1970-01-01T00:00:00Z">1</attribute>
+      </attributes>
+    </object>
+  </objects>
+</log>
\ No newline at end of file
diff --git a/src/frontend/src/app/components/header-bar/header-bar.component.html b/src/frontend/src/app/components/header-bar/header-bar.component.html
index df963898d1476506673887da118cf8f9ac384a23..33d1f7aabe1b5703995ae7da1a1efbb2de77a872 100644
--- a/src/frontend/src/app/components/header-bar/header-bar.component.html
+++ b/src/frontend/src/app/components/header-bar/header-bar.component.html
@@ -221,8 +221,8 @@
     #fileUploadOCEL
     type="file"
     class="d-none"
-    (change)="handleSelectedEventLogFile($event, false)"
-    accept=".xes"
+    (change)="handleSelectedOCELFile($event, false)"
+    accept=".xml, .xmlocel, .json, .jsonocel, .sqlite, .sqlite3"
   />
 
   <input
diff --git a/src/frontend/src/app/components/header-bar/header-bar.component.ts b/src/frontend/src/app/components/header-bar/header-bar.component.ts
index ae1dfa4499a622cd06c510121cf84d6a901bafa6..3112d6c48c60a26c2a6973cee82b897a2dec376f 100644
--- a/src/frontend/src/app/components/header-bar/header-bar.component.ts
+++ b/src/frontend/src/app/components/header-bar/header-bar.component.ts
@@ -30,6 +30,7 @@ export class HeaderBarComponent implements OnDestroy {
   @ViewChild('fileUploadProcessTree') fileUploadProcessTree: ElementRef;
   @ViewChild('fileUploadProject') fileUploadProject: ElementRef;
   @ViewChild('fileUploadEventLogRetry') fileUploadEventLogRetry: ElementRef;
+  @ViewChild('fileUploadOCELRetry') fileUploadOCELRetry: ElementRef;
   @ViewChild('eventLogSelectionRetryModal')
   eventLogSelectionRetryModal: ElementRef;
 
@@ -80,6 +81,32 @@ export class HeaderBarComponent implements OnDestroy {
     this.fileUploadOCEL.nativeElement.click();
   }
 
+  handleSelectedOCELFile(e, isRetry = false): void {
+    console.log("Debug: We are importing an OCEL file.")
+    const fileList: FileList = e.target.files;
+    if (fileList.length > 0) {
+      console.log("Debug: fileList.length > 0. Sending", fileList[0], fileList[0]["path"])
+      let backendCall;
+      if (!environment.electron) {
+        console.log('Debug: Electron is not the detected environment, using uploadEventLog.');
+        backendCall = this.backendService.uploadEventLog(fileList[0]);
+      } else {
+        console.log('Debug: Electron environment detected, using loadEventLogFromFilePath.');
+        backendCall = this.backendService.loadEventLogFromFilePath(fileList[0]['path']);
+      }
+      this.loadingOverlayService.showLoader(
+        'Importing OCEL. For large logs this can take up to several minutes'
+      );
+      backendCall.subscribe(() => {
+        this.loadingOverlayService.hideLoader();
+      });
+    }
+
+    // reset form
+    if (isRetry) this.fileUploadEventLogRetry.nativeElement.value = '';
+    else this.fileUploadEventLog.nativeElement.value = '';
+  }
+
   handleSelectedEventLogFile(e, isRetry = false): void {
     const fileList: FileList = e.target.files;
     if (fileList.length > 0) {