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

.github/copilot-instructions.md

@@ -13,6 +13,8 @@ The application is single page. The page is divided into three sections:
 - Bottom left section: Input area for JSON data
 - Bottom right section: Output are for JMESPath query results
 
+The Middle section also contains a toolbar with buttons to load data from disk, load sample data, format JSON input, and clear all inputs.
+
 The main components of the application are located in the `src` directory and target Node 24 LTS environment.
 
 Framework to be used:

README.md

@@ -10,6 +10,7 @@ A React-based web application for testing and validating JMESPath expressions ag
 
 - 🎯 **Real-time Evaluation**: JMESPath expressions are evaluated instantly as you type
 - 📝 **JSON Validation**: Built-in JSON syntax validation and error reporting
+- 📁 **File Upload**: Load JSON data directly from local files
 - 🎨 **Bootstrap UI**: Clean, responsive interface with Bootstrap styling
 - 🔄 **Sample Data**: Pre-loaded examples to get started quickly
 - 📱 **Responsive Design**: Works on desktop, tablet, and mobile devices
@@ -73,11 +74,15 @@ npm run docker:run
 ## Usage
 
 1. **Enter a JMESPath expression** in the top input field (e.g., `people[*].name`)
-2. **Paste or type JSON data** in the bottom-left textarea
+2. **Add JSON data** using one of these methods:
+   - **Load from disk**: Click "📁 Load from Disk" to upload a JSON file
+   - **Paste or type**: Enter JSON data directly in the bottom-left textarea
+   - **Load sample**: Use the "Load Sample" button for quick testing
 3. **View the results** in the bottom-right output area
 4. **Use the toolbar buttons** to:
-   - Load sample data
+   - Load JSON data from local files
-   - Format JSON
+   - Load sample data for testing
+   - Format JSON for better readability
    - Clear all inputs
 
 ### Example JMESPath Expressions

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}

src/index.css

@@ -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;