feat: add file upload to front end

src/web/src/components/MyFiles.tsx

@@ -2,6 +2,7 @@ import {useEffect, useState} from "react";
 import {FileService} from "../services/fileService.ts";
 import config from "../config";
 import {BlobFile} from "../models/file.ts";
+import UploadFile from "./UploadFile/UploadFile.tsx";
 
 const MyFiles = () => {
   const [isLoading, setIsLoading] = useState(false);
@@ -24,6 +25,7 @@ const MyFiles = () => {
               <div key={file.id}><a href={file.uri}>{file.id}</a></div>
       ))}
     </div>
+    <UploadFile />
   </>;
 }
 

src/web/src/components/UploadFile/UploadFile.module.css

@@ -0,0 +1,42 @@
+.uploadFileContainer {
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.uploadFileContainer h2 {
+  font-size: 1.5em;
+  margin-bottom: 10px;
+}
+
+.fileUploadLabel {
+  display: block;
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+
+.fileUploadInput {
+  display: block;
+  margin-bottom: 10px;
+}
+
+.uploadButton {
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.uploadButton:disabled {
+  background-color: #ccc;
+}
+
+.uploadError {
+  color: red;
+  margin-top: 10px;
+}

src/web/src/components/UploadFile/UploadFile.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import config from "../../config";
+import { FileService } from "../../services/fileService.ts";
+import styles from './UploadFile.module.css';
+
+const useFileUpload = (baseUrl: string, baseRoute: string) => {
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadError, setUploadError] = useState<string | null>(null);
+
+  const uploadFile = async (file: File) => {
+    const formData = new FormData();
+    formData.append('file', file);
+
+    setIsUploading(true);
+    setUploadError(null);
+
+    try {
+      const fileService = new FileService(baseUrl, baseRoute);
+      const response = await fileService.upload(formData);
+      console.log('File uploaded successfully:', response.data);
+    } catch (error) {
+      console.error('Error uploading file:', error);
+      setUploadError('Failed to upload file. Please try again.');
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  return { isUploading, uploadError, uploadFile };
+};
+
+const UploadFile = () => {
+  const [file, setFile] = useState<File | null>(null);
+  const { isUploading, uploadError, uploadFile } = useFileUpload(config.api.baseUrl, '/files');
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files && event.target.files.length > 0) {
+      setFile(event.target.files[0]);
+    }
+  };
+
+  const handleUpload = () => {
+    if (file) {
+      uploadFile(file);
+    }
+  };
+
+  return (
+    <div className={styles.uploadFileContainer}>
+      <h2>Upload File</h2>
+      <label htmlFor="file-upload" className={styles.fileUploadLabel}>
+        Choose a file to upload
+      </label>
+      <input
+        type="file"
+        id="file-upload"
+        onChange={handleFileChange}
+        className={styles.fileUploadInput}
+        aria-describedby="file-upload-description"
+      />
+      <button
+        onClick={handleUpload}
+        disabled={isUploading || !file}
+        className={styles.uploadButton}
+        aria-busy={isUploading}
+      >
+        {isUploading ? 'Uploading...' : 'Upload'}
+      </button>
+      {uploadError && (
+        <p id="file-upload-error" className={styles.uploadError} role="alert">
+          {uploadError}
+        </p>
+      )}
+      <p id="file-upload-description" style={{ display: 'none' }}>
+        Please select a file to upload and then click the upload button.
+      </p>
+    </div>
+  );
+};
+
+export default UploadFile;

src/web/src/services/fileService.ts

@@ -5,4 +5,14 @@ export class FileService extends RestService<BlobFile> {
     public constructor(baseUrl: string, baseRoute: string) {
         super(baseUrl, baseRoute);
     }
+
+    upload = async (formData: FormData) => {
+        return await this.client.request<BlobFile>({
+            method: 'POST',
+            data: formData,
+            headers: {
+                'Content-Type': 'multipart/form-data',
+            }
+        });
+    }
 }