diff --git a/src/components/subtitleuploader/subtitleuploader.js b/src/components/subtitleuploader/subtitleuploader.js
index 90e04b16dd..5bfc27011f 100644
--- a/src/components/subtitleuploader/subtitleuploader.js
+++ b/src/components/subtitleuploader/subtitleuploader.js
@@ -1,5 +1,7 @@
 import escapeHtml from 'escape-html';
 
+import { getSubtitleApi } from '@jellyfin/sdk/lib/utils/api/subtitle-api';
+import { toApi } from 'utils/jellyfin-apiclient/compat';
 import dialogHelper from '../../components/dialogHelper/dialogHelper';
 import ServerConnections from '../ServerConnections';
 import dom from '../../scripts/dom';
@@ -75,7 +77,20 @@ function setFiles(page, files) {
     reader.readAsDataURL(file);
 }
 
-function onSubmit(e) {
+function getStringFromFile(file) {
+    return new Promise(function (resolve, reject) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            // Split by a comma to remove the url: prefix
+            const data = e.target.result.split(',')[1];
+            resolve(data);
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+    });
+}
+
+async function onSubmit(e) {
     const file = currentFile;
 
     if (!isValidSubtitleFile(file)) {
@@ -89,8 +104,17 @@ function onSubmit(e) {
     const dlg = dom.parentWithClass(this, 'dialog');
     const language = dlg.querySelector('#selectLanguage').value;
     const isForced = dlg.querySelector('#chkIsForced').checked;
+    const isHearingImpaired = dlg.querySelector('#chkIsHearingImpaired').checked;
 
-    ServerConnections.getApiClient(currentServerId).uploadItemSubtitle(currentItemId, language, isForced, file).then(function () {
+    const subtitleApi = getSubtitleApi(toApi(ServerConnections.getApiClient(currentServerId)));
+
+    const data = await getStringFromFile(file);
+    const format = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase();
+
+    subtitleApi.uploadSubtitle({
+        itemId: currentItemId,
+        uploadSubtitleDto: { Data: data, Language: language, IsForced: isForced, Format: format, IsHearingImpaired: isHearingImpaired }
+    }).then(function () {
         dlg.querySelector('#uploadSubtitle').value = '';
         loading.hide();
         hasChanges = true;
diff --git a/src/components/subtitleuploader/subtitleuploader.template.html b/src/components/subtitleuploader/subtitleuploader.template.html
index ba43e00411..7febd1e7ac 100644
--- a/src/components/subtitleuploader/subtitleuploader.template.html
+++ b/src/components/subtitleuploader/subtitleuploader.template.html
@@ -31,6 +31,10 @@
                             <input type="checkbox" is="emby-checkbox" id="chkIsForced" />
                             <span>${LabelIsForced}</span>
                         </label>
+                        <label>
+                            <input type="checkbox" is="emby-checkbox" id="chkIsHearingImpaired" />
+                            <span>${LabelIsHearingImpaired}</span>
+                        </label>
                     </div>
                     <div class="selectContainer flex-grow">
                         <select is="emby-select" id="selectLanguage" required="required" label="${LabelLanguage}"></select>
diff --git a/src/strings/en-us.json b/src/strings/en-us.json
index 10639d58ef..7ac3e3bd53 100644
--- a/src/strings/en-us.json
+++ b/src/strings/en-us.json
@@ -1715,5 +1715,6 @@
     "Unreleased": "Not yet released",
     "LabelTonemappingMode": "Tone mapping mode",
     "TonemappingModeHelp": "Select the tone mapping mode. If you experience blown out highlights try switching to the RGB mode.",
-    "Unknown": "Unknown"
+    "Unknown": "Unknown",
+    "LabelIsHearingImpaired": "For hearing impaired (SDH)"
 }