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:
32
src/App.js
32
src/App.js
@@ -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}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user