Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules/
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import React, { useState } from 'react'

const DatasetUpload: React.FC = () => {
const [file, setFile] = useState<File | null>(null)
const [isUploading, setIsUploading] = useState(false)
const [status, setStatus] = useState<{ type: 'success' | 'error'; message: string } | null>(null)

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files && e.target.files[0]) {
setFile(e.target.files[0])
setStatus(null)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Clearing the status immediately when a new file is selected (setStatus(null)) might remove important feedback from a previous upload attempt (e.g., a 'failed' message) before the user has fully processed it. It might be better to clear the status only when a new upload process is initiated (e.g., at the beginning of handleSubmit) or provide a clear 'dismiss' option for the status message.

}
}

const handleSubmit = async () => {
if (!file) return

if (isUploading) return

setIsUploading(true)
setStatus(null)

const formData = new FormData()
formData.append('file', file)

try {
const response = await fetch('/api/v1/training-datasets/upload', {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The API endpoint /api/v1/training-datasets/upload is hardcoded directly in the component. For better maintainability and flexibility across different environments (development, staging, production), it's recommended to manage API endpoints through environment variables or a centralized configuration file. This allows for easier updates without modifying the component's source code.

method: 'POST',
body: formData,
})

if (response.ok) {
setStatus({ type: 'success', message: 'Dataset uploaded successfully!' })
setFile(null)
} else {
setStatus({ type: 'error', message: 'Failed to upload dataset. Please try again.' })
Comment on lines +32 to +36
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The error messages for failed uploads are quite generic ('Failed to upload dataset. Please try again.' and 'Network error. Please check your connection.'). While these are good defaults, it would significantly improve the user experience and debugging if more specific error messages from the backend could be parsed and displayed. For example, if the backend returns a JSON object with an error field, you could display that content.

Consider checking response.json() for more detailed error information when response.ok is false.

}
} catch (error) {
setStatus({ type: 'error', message: 'Network error. Please check your connection.' })
} finally {
setIsUploading(false)
}
}

return (
<div className="p-6 bg-gray-900 rounded-lg border border-gray-800 text-white max-w-lg mx-auto mt-10">
<h2 className="text-xl font-semibold mb-4">Upload Training Data</h2>

<div className="flex flex-col gap-4">
<input
type="file"
onChange={handleFileChange}
disabled={isUploading}
className="block w-full text-sm text-gray-400
file:mr-4 file:py-2 file:px-4
file:rounded-full file:border-0
file:text-sm file:font-semibold
file:bg-indigo-600 file:text-white
hover:file:bg-indigo-700
disabled:opacity-50 disabled:cursor-not-allowed"
Comment on lines +50 to +60
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

There is no client-side validation for the file type. While backend validation is crucial for security, adding client-side validation (e.g., checking file.type or file.name extension) can provide immediate feedback to the user, improving the user experience by preventing them from attempting to upload unsupported file types. You could also use the accept attribute on the input tag to suggest allowed file types to the browser.

/>

{status && (
<div
className={`p-3 rounded text-sm ${
status.type === 'success'
? 'bg-green-900/50 text-green-300'
: 'bg-red-900/50 text-red-300'
}`}
>
{status.message}
</div>
)}

<button
onClick={handleSubmit}
disabled={!file || isUploading}
className={`px-4 py-2 rounded font-medium transition-colors
${
!file || isUploading
? 'bg-gray-700 text-gray-400 cursor-not-allowed'
: 'bg-indigo-600 text-white hover:bg-indigo-700'
}
`}
>
{isUploading ? 'Uploading...' : 'Submit Dataset'}
</button>
</div>
</div>
)
}

export default DatasetUpload