diff --git a/README.md b/README.md index 5c39e5b625..51c8169898 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,7 @@ Or you can use the WASM version in the browser: [GSA Treemap](https://gsa.zxilly > Due to the limitation of the browser, the wasm version is much slower than the native version. > Normally costs 10x time to analyze the same binary. > -> Only recommended for analysing small applications (less than 15MB in size) +> Only recommended for analysing small applications (less than 30 MB in size) The web page will look like this: diff --git a/README_zh-CN.md b/README_zh-CN.md index 08e49ba712..7955798662 100644 --- a/README_zh-CN.md +++ b/README_zh-CN.md @@ -42,7 +42,7 @@ $ gsa --web golang-compiled-binary > 由于浏览器的限制,wasm 版本比原生版本慢得多。 > 通常分析相同二进制文件需要 10 倍的时间。 > -> 仅建议用于分析小型应用程序(大小小于 15MB) +> 仅建议用于分析小型应用程序(大小小于 30 MB) 网页将如下所示: diff --git a/ui/src/explorer_main.tsx b/ui/src/explorer_main.tsx index 2c2e1c8b4c..29d5721d62 100644 --- a/ui/src/explorer_main.tsx +++ b/ui/src/explorer_main.tsx @@ -1,13 +1,23 @@ import {useAsync} from "react-use"; import ReactDOM from "react-dom/client"; -import React, {ReactNode, useEffect, useMemo} from "react"; -import {Box, Button, CssBaseline, Dialog, DialogContent, DialogContentText, DialogTitle, Link} from "@mui/material"; +import React, {ReactNode, useCallback, useEffect, useMemo, useState} from "react"; +import { + Box, + Button, + CssBaseline, + Dialog, + DialogActions, + DialogContent, + DialogContentText, + DialogTitle, + Link +} from "@mui/material"; import "./tool/wasm_exec.js" import gsa from "../gsa.wasm?init" -import {loadDataFromWasmResult} from "./tool/utils.ts"; +import {formatBytes, loadDataFromWasmResult} from "./tool/utils.ts"; import {Entry} from "./tool/entry.ts"; import TreeMap from "./TreeMap.tsx"; @@ -23,12 +33,58 @@ type ModalState = { type fileChangeHandler = (file: File) => void +const SizeLimit = 1024 * 1024 * 30 + const FileSelector = ({handler}: { value?: File | null, handler: fileChangeHandler }) => { + const [open, setOpen] = useState(false) + const [pendingFile, setPendingFile] = useState(null) + + const handleChange = useCallback((e: React.ChangeEvent) => { + if (!e.target.files || e.target.files.length === 0) { + return + } + + const f = e.target.files[0] + + if (f.size > SizeLimit) { + setOpen(true) + setPendingFile(f) + return + } else { + handler(f) + } + + }, []) + + const handleClose = useCallback(() => { + setOpen(false) + }, []) + return ( <> + + + Binary too large + + + + The selected binary {pendingFile?.name} has a size of {formatBytes(pendingFile?.size || 0)}. + It is not recommended to use the wasm version for binary files larger than 30MB. + + + + + + + { - const file = e.target.files?.item(0) - if (file) { - handler(file) - } - }} + multiple={false} + onChange={handleChange} hidden /> diff --git a/ui/src/main.tsx b/ui/src/main.tsx index 4ee5a043d0..a3721923ce 100644 --- a/ui/src/main.tsx +++ b/ui/src/main.tsx @@ -1,7 +1,7 @@ import React from 'react' import ReactDOM from 'react-dom/client' -import TreeMap from './TreeMap.tsx' +import TreeMap from './TreeMap.tsx' import {loadDataFromEmbed} from "./tool/utils.ts"; import {Entry} from "./tool/entry.ts";