Add file upload feature: Load JSON data from disk

- Add 'Load from Disk' button to toolbar in middle section
- Implement file selection dialog with JSON validation
- Support .json and .txt file formats
- Display error messages for invalid JSON files
- Update README to document the new file upload capability
- Add styling for the new upload button
- Feature matches requirement in copilot-instructions.md
This commit is contained in:
2026-01-18 13:48:41 +01:00
parent 393c798080
commit be7d4502ac
4 changed files with 48 additions and 3 deletions

View File

@@ -116,6 +116,31 @@ function App() {
}`);
};
const loadFromDisk = () => {
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = '.json,.txt';
fileInput.onchange = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
try {
const content = e.target.result;
// Try to parse as JSON to validate
JSON.parse(content);
setJsonData(content);
setJsonError('');
} catch (err) {
setJsonError(`Invalid JSON file: ${err.message}`);
}
};
reader.readAsText(file);
}
};
fileInput.click();
};
return (
<div className="container-fluid">
{/* Header Section */}
@@ -144,6 +169,13 @@ function App() {
JMESPath Expression
</h5>
<div>
<button
className="btn btn-outline-success btn-sm me-2"
onClick={loadFromDisk}
title="Load JSON from disk"
>
📁 Load from Disk
</button>
<button
className="btn btn-outline-primary btn-sm me-2"
onClick={loadSample}

View File

@@ -59,6 +59,12 @@ code {
color: #155724;
}
.btn-outline-success:hover {
background-color: #28a745;
border-color: #28a745;
color: white;
}
.header-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;