use showOpenFilePicker()

src/components/ModalOpen.tsx

@@ -135,29 +135,37 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
     this.onStyleSelect(this.state.styleUrl);
   }
 
-  onUpload = (_: any, files: Result[]) => {
+  onOpenFile = async () => {
-    const [, file] = files[0];
-    const reader = new FileReader();
-
     this.clearError();
 
-    reader.readAsText(file, "UTF-8");
+    const pickerOpts = {
-    reader.onload = e => {
+      types: [
-      let mapStyle;
+        {
-      try {
+          description: "Style JSON",
-        mapStyle = JSON.parse(e.target?.result as string)
+          accept: {"application/json": [".json"]},
-      }
+        },
-      catch(err) {
+      ],
-        this.setState({
+      excludeAcceptAllOption: true,
-          error: (err as Error).toString()
+      multiple: false,
-        });
+    };
-        return;
+
-      }
+    const [fileHandle] = await window.showOpenFilePicker(pickerOpts);
-      mapStyle = style.ensureStyleValidity(mapStyle)
+    const file = await fileHandle.getFile();
-      this.props.onStyleOpen(mapStyle);
+    const content = await file.text();
-      this.onOpenToggle();
+
+    let mapStyle;
+    try {
+      mapStyle = JSON.parse(content)
+    } catch (err) {
+      this.setState({
+        error: (err as Error).toString()
+      });
+      return;
     }
-    reader.onerror = e => console.log(e.target);
+    mapStyle = style.ensureStyleValidity(mapStyle)
+    this.props.onStyleOpen(mapStyle);
+    this.onOpenToggle();
+    return file;
   }
 
   onOpenToggle() {
@@ -196,7 +204,7 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
       );
     }
 
-    return  (
+    return (
       <div>
         <Modal
           data-wd-key="modal:open"
@@ -206,11 +214,14 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
         >
           {errorElement}
           <section className="maputnik-modal-section">
-            <h1>{t("Upload Style")}</h1>
+            <h1>{t("Open local Style")}</h1>
-            <p>{t("Upload a JSON style from your computer.")}</p>
+            <p>{t("Open a local JSON style from your computer.")}</p>
-            <FileReaderInput onChange={this.onUpload} tabIndex={-1} aria-label={t("Style file")}>
+            <div>
-              <InputButton className="maputnik-upload-button"><MdFileUpload /> {t("Upload")}</InputButton>
+              <InputButton
-            </FileReaderInput>
+                className="maputnik-big-button"
+                onClick={this.onOpenFile}><MdFileUpload/> {t("Open Style")}
+              </InputButton>
+            </div>
           </section>
 
           <section className="maputnik-modal-section">