diff --git a/frontend/src/components/Common/input/FileInput.js b/frontend/src/components/Common/input/FileInput.js index ed5f6fea8ada18424fd964f8fcce396fb88b28d3..76e0bdcba6a391d7c8319ef314dc8ccad9b69c1e 100644 --- a/frontend/src/components/Common/input/FileInput.js +++ b/frontend/src/components/Common/input/FileInput.js @@ -1,3 +1,5 @@ +// src/components/Common/input/FileInput.js + import React, { useRef } from 'react'; import { FaUpload, FaTrash } from 'react-icons/fa'; import '../../../styles/input/FileInput.css'; diff --git a/frontend/src/components/Common/input/NumberInput.js b/frontend/src/components/Common/input/NumberInput.js index c16158f3d7ec692d409af0c07f48514747742830..fcbc57f42f2ccfdfd2343f81985197de70a547e7 100644 --- a/frontend/src/components/Common/input/NumberInput.js +++ b/frontend/src/components/Common/input/NumberInput.js @@ -1,3 +1,5 @@ +// src/components/Common/input/NumberInput.js + import React, { useState, useEffect } from 'react'; import '../../../styles/input/NumberInput.css'; diff --git a/frontend/src/components/detection/video/VideoInputs.js b/frontend/src/components/detection/video/VideoInputs.js index c57bf248066264fb2d78992b77c3ab963726346b..7c822db5548b0f7b399a07da4a5a1a8ee3f687e8 100644 --- a/frontend/src/components/detection/video/VideoInputs.js +++ b/frontend/src/components/detection/video/VideoInputs.js @@ -1,3 +1,5 @@ +// Src/Component/Detection/Video/VideoInputs.js + import React, { useEffect } from 'react'; import Dropdown from '../../Common/input/Dropdown'; import NumberInput from '../../Common/input/NumberInput'; diff --git a/frontend/src/components/detection/video/VideoUploadForm.js b/frontend/src/components/detection/video/VideoUploadForm.js index 5bb312a4ed0ee3647ee9933d111dd093638da212..a0b860a9962ba66073eb08118574ed006a7fd1ad 100644 --- a/frontend/src/components/detection/video/VideoUploadForm.js +++ b/frontend/src/components/detection/video/VideoUploadForm.js @@ -1,7 +1,18 @@ +// src/components/detection/video/VideoUploadForm.js + import React, { useState, useEffect } from 'react'; import { Form, Button } from 'react-bootstrap'; import VideoInputs from './VideoInputs'; -import { getVideoDuration, calculateMinimumValidFrameDelay, calculateMaximumDelay, calculateExpectedLength, calculateOptimalValues, calculateValidFramesJumpOptions, isDelayPerFrameValid } from './videoUtils'; +import FileInput from '../../Common/input/FileInput'; +import { + getVideoDuration, + calculateMinimumValidFrameDelay, + calculateMaximumDelay, + calculateExpectedLength, + calculateOptimalValues, + calculateValidFramesJumpOptions, + isDelayPerFrameValid +} from './videoUtils'; const VideoUploadForm = ({ handleFileChange, handleSubmit, handleFramesJumpChange, handleFrameDelayChange, framesJump, frameDelay, isLoading }) => { const [videoFile, setVideoFile] = useState(null); @@ -11,6 +22,7 @@ const VideoUploadForm = ({ handleFileChange, handleSubmit, handleFramesJumpChang const [minFrameDelay, setMinFrameDelay] = useState(1); const [isVideoUploaded, setIsVideoUploaded] = useState(false); const [validFramesJumpOptions, setValidFramesJumpOptions] = useState([]); + const [fileName, setFileName] = useState(''); useEffect(() => { if (videoFile) { @@ -24,6 +36,7 @@ const VideoUploadForm = ({ handleFileChange, handleSubmit, handleFramesJumpChang handleFrameDelayChange({ target: { value: frameDelay } }); setValidFramesJumpOptions(calculateValidFramesJumpOptions(duration)); setIsVideoUploaded(true); + setFileName(videoFile.name); }).catch(error => { console.error('Error getting video duration:', error); }); @@ -54,11 +67,22 @@ const VideoUploadForm = ({ handleFileChange, handleSubmit, handleFramesJumpChang handleFileChange(event); }; + const handleRemoveFile = () => { + setVideoFile(null); + setIsVideoUploaded(false); + setFileName(''); + }; + return ( <Form onSubmit={handleSubmit}> <Form.Group controlId="videoFile"> - <Form.Label>Upload Video</Form.Label> - <Form.Control type="file" accept="video/*" onChange={handleFileInputChange} disabled={isLoading} /> + <FileInput + label="Upload Video" + onChange={handleFileInputChange} + fileName={fileName} + disabled={isLoading} + onRemove={handleRemoveFile} + /> </Form.Group> {isVideoUploaded && ( <VideoInputs diff --git a/frontend/src/components/detection/video/videoUtils.js b/frontend/src/components/detection/video/videoUtils.js index 0d73d5ebbcda5f60b56f0f4269fbcd3fc3755bd7..d117314c6a75808f97e5e3b5bbd9569c80c62f99 100644 --- a/frontend/src/components/detection/video/videoUtils.js +++ b/frontend/src/components/detection/video/videoUtils.js @@ -1,3 +1,4 @@ +// Src/Component/Detection/Video/VideoInputs.js export const getVideoDuration = (file) => { return new Promise((resolve) => { const video = document.createElement('video');