shadcn.io is not affiliated with official shadcn/ui
File Analyzer AI Block for React
A file analyzer with a drop zone and three typed samples: the counts are read from the file's own text in the browser, and the samples add a typed summary with entities, key figures and recommendations.
Installation
Overview
Show what a file contains before anything reads it for meaning, with this file analyzer for React with Base UI. A compact header names Scanmoor, a data-room assistant, and a hairline frame with a plus mark on each corner holds a File Upload drop zone and three typed sample files at the start (orders-q3.csv, contract.txt, notes.md), with the analysis of the chosen file at the end. Tabs split it in two: "Read here" counts the file's own text in the browser (a CSV gives rows, columns and header names, a text or Markdown file gives lines, words and its longest line, a JSON file gives its top-level keys, and anything else only name, size and type), and "Typed summary" shows, for the samples, two sentences, the entities in them as Badges with a kind word, key figures and two recommendations. A file you drop is read in this tab, listed under the samples and never uploaded. For data rooms, intake forms and any tool that should show its first look at a file honestly.
FAQ
What stays in the page, and how do I make it real?
Everything. A dropped file is read with the browser's own file API in this tab, up to 200 KB of text, and only its name, size, type and counts are kept in memory; nothing is uploaded and no model reads it. The summaries of the three samples are typed. To wire it for real, send the file to your storage in accepted, run your own extraction and put its result in the Typed shape; the second tab then shows it.
What gets read, and what does not?
Files named .csv, .tsv, .json, .txt, .md or .log, or whose type starts with text, and no larger than 200 KB, have their text read. A CSV is split on commas without quote handling, so it counts simple tables correctly. Anything else, or anything larger, shows its name, size and type and the line "Contents of this type are not read here."
Why is the summary only for the samples?
A summary of your own file would need a model, and this demo has none. Rather than invent one, the second tab says there is no typed summary for a file you drop, and the counts on the first tab are the real result. The three samples carry typed summaries, and their counts are worked out from their text like any other file.
How does it work from the keyboard?
Browse opens the file picker and the drop zone also takes a drop; every file in the list is a button, and each file you dropped has a remove button named for it. The two tabs follow the arrow keys, and the status line at the foot says what was read.