From 2836fa40272a3f741db2abd43abcd846a1b0c6c8 Mon Sep 17 00:00:00 2001
From: a2-imeri <Alfret2.imeri@live.uwe.ac.uk>
Date: Wed, 3 Jul 2024 16:38:11 +0100
Subject: [PATCH] Add Upluad Button
---
.../src/components/Common/input/FileInput.js | 2 ++
.../components/Common/input/NumberInput.js | 2 ++
.../components/detection/video/VideoInputs.js | 2 ++
.../detection/video/VideoUploadForm.js | 30 +++++++++++++++++--
.../components/detection/video/videoUtils.js | 1 +
5 files changed, 34 insertions(+), 3 deletions(-)
diff --git a/frontend/src/components/Common/input/FileInput.js b/frontend/src/components/Common/input/FileInput.js
index ed5f6fe..76e0bdc 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 c16158f..fcbc57f 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 c57bf24..7c822db 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 5bb312a..a0b860a 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 0d73d5e..d117314 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');
--
GitLab