Merge pull request #41 from silx-kit/brwoser-file

Allow opening very large files manually from inside the webview

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [v0.1.5](https://github.com/silx-kit/vscode-h5web/compare/v0.1.4...v0.1.5)
+
+- ✨ **Allow opening HDF5 files of any size.** Previously, when you tried to
+  open a file larger than 2 GB, you would see an error in the H5Web webview
+  editor. Now, you will be able to browse for the file manually from inside the
+  webview, and doing so will bypass the file size limitation.
+
 ## [v0.1.4](https://github.com/silx-kit/vscode-h5web/compare/v0.1.3...v0.1.4)
 
 - ✨ Upgrade H5Web from v11.1.1 to v11.2.0

README.md

@@ -57,5 +57,7 @@ available in
 This extension uses [h5wasm](https://github.com/usnistgov/h5wasm) to read HDF5
 files and therefore suffers from the following limitations:
 
-- Files bigger than 2GB cannot be read
-- External links cannot be resolved
+- Files bigger than 2GB cannot be opened automatically from the VS Code
+  Explorer. You will need to browse for them manually from the H5Web webview
+  editor when requested.
+- External links cannot be resolved.

app/App.tsx

@@ -4,6 +4,11 @@ import Viewer from './Viewer';
 import { ErrorBoundary } from 'react-error-boundary';
 import { vscode } from './vscode-api';
 import { MessageType, type Message, type FileInfo } from '../src/models';
+import { H5WasmLocalFileProvider } from '@h5web/h5wasm';
+import StandaloneViewer from './StandaloneViewer';
+
+// 2 GB = 2 * 1024 * 1024 * 1024 B
+const MAX_SIZE_IN_BYTES = 2147483648;
 
 function App() {
   const [fileInfo, setFileInfo] = useState<FileInfo>();
@@ -23,6 +28,24 @@ function App() {
     return null;
   }
 
+  if (fileInfo.size === 0) {
+    // e.g. when comparing git changes on an untracked file - https://github.com/silx-kit/vscode-h5web/issues/22
+    return <p>File does not exist</p>;
+  }
+
+  if (fileInfo.size >= MAX_SIZE_IN_BYTES) {
+    return (
+      <StandaloneViewer
+        customMessage={
+          <p>
+            File is too large to be opened from the explorer (max 2 GB). Please
+            browse for it from here:
+          </p>
+        }
+      />
+    );
+  }
+
   return (
     <ErrorBoundary fallbackRender={({ error }) => <p>{error.message}</p>}>
       <Suspense fallback={<>Loading...</>}>

app/StandaloneViewer.tsx

@@ -0,0 +1,37 @@
+import { App } from '@h5web/app';
+import { H5WasmLocalFileProvider } from '@h5web/h5wasm';
+import { useState, type ReactNode } from 'react';
+import { getExportURL, getPlugin } from './utils';
+
+interface Props {
+  customMessage?: ReactNode;
+}
+
+function StandaloneViewer(props: Props) {
+  const { customMessage } = props;
+  const [fallbackFile, setFallbackFile] = useState<File>();
+
+  if (!fallbackFile) {
+    return (
+      <>
+        {customMessage}
+        <input
+          type="file"
+          onChange={(evt) => setFallbackFile(evt.target.files?.[0])}
+        />
+      </>
+    );
+  }
+
+  return (
+    <H5WasmLocalFileProvider
+      file={fallbackFile}
+      getExportURL={getExportURL}
+      getPlugin={getPlugin}
+    >
+      <App />
+    </H5WasmLocalFileProvider>
+  );
+}
+
+export default StandaloneViewer;

app/Viewer.tsx

@@ -4,27 +4,13 @@ import { suspend } from 'suspend-react';
 import { getExportURL, getPlugin } from './utils';
 import { type FileInfo } from '../src/models.js';
 
-// 2 GB = 2 * 1024 * 1024 * 1024 B
-const MAX_SIZE_IN_BYTES = 2147483648;
-
 interface Props {
   fileInfo: FileInfo;
 }
 
 function Viewer(props: Props) {
   const { fileInfo } = props;
 
-  if (fileInfo.size === 0) {
-    // e.g. when comparing git changes on an untracked file - https://github.com/silx-kit/vscode-h5web/issues/22
-    return <p>File does not exist</p>;
-  }
-
-  if (fileInfo.size >= MAX_SIZE_IN_BYTES) {
-    throw new Error(
-      'Cannot open: the file is bigger than the maximum supported size (2 GB)'
-    );
-  }
-
   const buffer = suspend(async () => {
     const res = await fetch(fileInfo.uri);
     return res.arrayBuffer();

src/H5WebViewer.ts

@@ -124,7 +124,7 @@ export default class H5WebViewer
 				<meta charset="UTF-8">
 				<meta
           http-equiv="Content-Security-Policy"
-          content="default-src 'none'; connect-src ${cspSource} data:; script-src ${cspSource} 'unsafe-eval'; style-src ${cspSource}; img-src blob:;"
+          content="default-src 'none'; connect-src ${cspSource} data:; script-src ${cspSource} 'unsafe-eval'; style-src ${cspSource}; img-src blob:; worker-src blob:;"
         >
 				<meta name="viewport" content="width=device-width, initial-scale=1.0">
 				<title>H5Web</title>