gotthard_g/aaredb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upload dialog is uploading a file

Browse Source
This commit is contained in:
GotthardG
2024-11-05 14:08:34 +01:00
parent 976cdc1a0a
commit 8cec4cb8df
7 changed files with 648 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
frontend/src/components/UploadDialog.tsx
View File

@ -1,5 +1,4 @@
import * as React from 'react';
import { useState } from 'react';
import { useState, useEffect } from 'react';
import {
Dialog,
DialogTitle,
@ -14,6 +13,8 @@ import CloseIcon from '@mui/icons-material/Close';
import DownloadIcon from '@mui/icons-material/Download';
import UploadFileIcon from '@mui/icons-material/UploadFile';
import logo from '../assets/Heidi-logo.png';
import { OpenAPI, UploadService } from '../../openapi';
import type { Body_upload_file_upload_post } from '../../openapi/models/Body_upload_file_upload_post';
interface UploadDialogProps {
open: boolean;
@ -23,12 +24,19 @@ interface UploadDialogProps {
const UploadDialog: React.FC<UploadDialogProps> = ({ open, onClose }) => {
const [uploadError, setUploadError] = useState<string | null>(null);
const [fileSummary, setFileSummary] = useState<{
dewars: number;
pucks: number;
samples: number;
dewars_count: number;
dewars: string[];
pucks_count: number;
pucks: string[];
samples_count: number;
samples: string[];
} | null>(null);
const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
useEffect(() => {
OpenAPI.BASE = 'http://127.0.0.1:8000';
}, []);
const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (!file) {
return;
@ -44,22 +52,25 @@ const UploadDialog: React.FC<UploadDialogProps> = ({ open, onClose }) => {
return;
}
// Simulate file reading and validation
const reader = new FileReader();
reader.onload = () => {
// Here, parse the file content and validate
// For the demo, we'll mock the summary
const mockSummary = {
dewars: 5,
pucks: 10,
samples: 100,
};
setFileSummary(mockSummary);
};
reader.onerror = () => {
setUploadError('Failed to read the file. Please try again.');
};
reader.readAsArrayBuffer(file);
// Create the formData object compliant with the type definition
const formData: Body_upload_file_upload_post = {
file: file, // TypeScript understands that file is a Blob
} as Body_upload_file_upload_post;
try {
// Use the generated OpenAPI client UploadService method
const response = await UploadService.uploadFileUploadPost(formData);
console.log('File summary response from backend:', response);
console.log('Dewars:', response.dewars);
console.log('Pucks:', response.pucks);
console.log('Samples:', response.samples);
setFileSummary(response);
} catch (error) {
console.error('File upload error:', error);
setUploadError('Failed to upload file. Please try again.');
}
};
return (
@ -74,14 +85,8 @@ const UploadDialog: React.FC<UploadDialogProps> = ({ open, onClose }) => {
</DialogTitle>
<DialogContent dividers>
<Box display="flex" flexDirection="column" alignItems="center" mb={2}>
<img
src={logo}
alt="Logo"
style={{ width: 200, marginBottom: 16 }}
/>
<Typography variant="subtitle1">
Latest Spreadsheet Template Version 6
</Typography>
<img src={logo} alt="Logo" style={{ width: 200, marginBottom: 16 }} />
<Typography variant="subtitle1">Latest Spreadsheet Template Version 6</Typography>
<Typography variant="body2" color="textSecondary">
Last update: October 18, 2024
</Typography>
@ -111,17 +116,9 @@ const UploadDialog: React.FC<UploadDialogProps> = ({ open, onClose }) => {
</Button>
</Box>
<Box mt={3}>
<Button
variant="contained"
component="label"
startIcon={<UploadFileIcon />}
>
<Button variant="contained" component="label" startIcon={<UploadFileIcon />}>
Choose a File
<input
type="file"
hidden
onChange={handleFileUpload}
/>
<input type="file" hidden onChange={handleFileUpload} />
</Button>
{uploadError && (
<Typography color="error" sx={{ mt: 2 }}>
@ -130,15 +127,22 @@ const UploadDialog: React.FC<UploadDialogProps> = ({ open, onClose }) => {
)}
{fileSummary && (
<Box mt={2}>
<Typography color="success.main">
File uploaded successfully!
</Typography>
<Typography color="success.main">File uploaded successfully!</Typography>
<Typography variant="body1">
<strong>File Summary:</strong>
</Typography>
<Typography>Dewars: {fileSummary.dewars}</Typography>
<Typography>Pucks: {fileSummary.pucks}</Typography>
<Typography>Samples: {fileSummary.samples}</Typography>
<Typography>Dewars: {fileSummary.dewars_count}</Typography>
<Typography>Pucks: {fileSummary.pucks_count}</Typography>
<Typography>Samples: {fileSummary.samples_count}</Typography>
<Typography variant="body2">
<strong>Dewar Names:</strong> {Array.isArray(fileSummary.dewars) ? fileSummary.dewars.join(', ') : 'N/A'}
</Typography>
<Typography variant="body2">
<strong>Puck Names:</strong> {Array.isArray(fileSummary.pucks) ? fileSummary.pucks.join(', ') : 'N/A'}
</Typography>
<Typography variant="body2">
<strong>Sample Names:</strong> {Array.isArray(fileSummary.samples) ? fileSummary.samples.join(', ') : 'N/A'}
</Typography>
</Box>
)}
</Box>
@ -152,4 +156,4 @@ const UploadDialog: React.FC<UploadDialogProps> = ({ open, onClose }) => {
);
};
export default UploadDialog;
export default UploadDialog;