Your browser has the CSV text, yet the query cannot find its filename. Register the data with DuckDB-Wasm, import it through the connection, and wait for that work before querying the table. A filename in a SQL string does not by itself supply the file's bytes.
Start with a fictional stock extract containing North quantities six and five and South quantity four. The expected North result is two source records and eleven units. All locations together contain three records and fifteen units. Keep those counts and unit totals distinct in the HTML report.
Open the complete example · Download the full HTML source
Separate file registration from table creation
The DuckDB-Wasm data-ingestion guide documents registering file content and importing CSV data. Once your chosen DuckDB-Wasm distribution has initialized the db engine and created a connection, the ingestion sequence can begin:
await db.registerFileText('stock.csv', csvText);
await connection.insertCSVFromPath('stock.csv', {
name: 'stock',
detect: true,
header: true
});
Supply csvText and the initialized objects in the surrounding application. This is an ingestion snippet, not a complete engine loader or a claim that a single script tag contains every required worker and WebAssembly asset.
Automatic detection is a starting point for the fixture. Inspect the resulting schema before trusting an identifier, date, or quantity in a real report. When the source contract requires exact types, supply the matching import options documented for your selected release rather than relying on a convenient inference.
Query a small, explicit result
The query guide describes asynchronous query execution and prepared statements. A fixed query for the fictional data is:
SELECT location, COUNT(*) AS source_rows, SUM(units) AS units
FROM stock
GROUP BY location
ORDER BY location;
Require North to show two source rows and eleven units, and South one source row and four units. Compare those values with the three source records before rendering a successful summary. If a page offers user-selected values, use the documented parameter mechanism instead of concatenating them into SQL.
The existing sql.js HTML guide initializes a SQLite engine and manages its prepared-statement lifecycle. DuckDB-Wasm has its own engine initialization and file-registration interface; replacing the library filename does not migrate those calls.
Make asynchronous changes visible
Clear the previous result when a replacement file starts loading. Keep the query action disabled until registration and import finish. If ingestion fails, show that failure and leave the result unavailable instead of retaining the previous file's successful fifteen-unit total.
Prevent overlapping imports from making the page ambiguous. A simple reading tool can accept one import at a time; a more complex one needs to identify which completed task still belongs to the current file. Name the accepted source beside the table so the reviewer can see what was queried.
Before delivering a live HTML page, test its worker and binary URLs in the environment where the recipient will open it. A static summary is a separate option: export the accepted rows with the SQL and source label and identify it as a snapshot. Finish the review by matching North's eleven units to six plus five, rather than using the engine's own total as the only proof of correctness.
Before forwarding the static reading copy, use the self-contained HTML checklist to inspect its file references. Apply that check separately to the reading copy and the executable engine package; the engine run can require worker and binary assets that the displayed result does not.
Read the captured result or repeat the engine run
The supplied reading copy shows an actual DuckDB-Wasm 1.29.0 browser query. It is static: changing its displayed text does not rerun SQL. Download the engine source and execution records to inspect the complete self-contained engine HTML and the two-width expected/actual checks. The native check also changed South to nine units, verified that result, then restored four before capturing the reading.