diff --git a/widget/settings/shared/components/image.ts b/widget/settings/shared/components/image.ts
index 94f838a..1906004 100644
--- a/widget/settings/shared/components/image.ts
+++ b/widget/settings/shared/components/image.ts
@@ -1,11 +1,31 @@
 import { Opt } from 'lib/option';
-import { Attribute, BoxWidget } from 'lib/types/widget';
+import { Attribute, BoxWidget, Child } from 'lib/types/widget';
+import FileChooserButton from 'types/widgets/filechooserbutton';
 
 export const imageInputter = <T>(self: BoxWidget, opt: Opt<T>): Attribute => {
-    return (self.child = Widget.FileChooserButton({
-        class_name: 'image-chooser',
-        on_file_set: ({ uri }) => {
-            opt.value = uri!.replace('file://', '') as T;
-        },
-    }));
+    self.child = createFileChooserButton(opt);
+    return self.child;
 };
+
+const createFileChooserButton = <T>(opt: Opt<T>): FileChooserButton<Child, Attribute> => {
+    return Widget.FileChooserButton({
+        class_name: 'image-chooser',
+        on_file_set: handleFileSet(opt),
+    });
+};
+
+const handleFileSet =
+    <T>(opt: Opt<T>) =>
+    ({ uri }: { uri: string | null }): void => {
+        if (!uri) {
+            console.warn('No URI selected');
+            return;
+        }
+
+        try {
+            const decodedPath = decodeURIComponent(uri.replace('file://', ''));
+            opt.value = decodedPath as T;
+        } catch (error) {
+            console.error('Failed to decode URI:', error);
+        }
+    };