Add a button to choose the file.

frontend/src/App.css

@@ -41,6 +41,13 @@ button {
   margin-top: 20px;
 }
 
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

frontend/src/components/MainComponent.js

@@ -1,9 +1,22 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 
 const TextAreaComponent = () => {
   const [textAreaValue, setTextAreaValue] = useState('');
   const [password, setPassword] = useState('');
 
+  const fileInputRef = useRef(null);
+
+  const handleFileUpload = (event) => {
+    const file = event.target.files[0];
+    if (file) {
+      console.log('Selected file:', file);
+    }
+  };
+
+  const openFileDialog = () => {
+    fileInputRef.current.click();
+  };
+
   const handleSave = () => {
     window.api.filesSave({ password: password, content: textAreaValue })
       .then(() => alert('Text saved successfully'))
@@ -17,14 +30,25 @@ const TextAreaComponent = () => {
 
   return (
     <div>
-      <label htmlFor="password">Password: </label>
-      <input
-        id="password"
-        type="password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-        placeholder="Enter password"
-      />
+      <div class="container">
+        <button onClick={openFileDialog}>Choose File</button>
+        <input
+          type="file"
+          ref={fileInputRef}
+          style={{ display: 'none' }}
+          onChange={handleFileUpload}
+        />
+        <div>
+          <label htmlFor="password">Password: </label>
+          <input
+            id="password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Enter password"
+          />
+        </div>
+      </div>
       <br />
       <button onClick={handleFetchContent}>Decrypt</button>
       <br />