56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { useMutation } from '@tanstack/react-query';
|
|
import { FormEvent, useState } from 'react';
|
|
import { uploadProjectAudio } from '../lib/api';
|
|
|
|
interface AudioUploadProps {
|
|
projectId: string;
|
|
onSuccess?: () => void;
|
|
}
|
|
|
|
export function AudioUpload({ projectId, onSuccess }: AudioUploadProps) {
|
|
const [file, setFile] = useState<File | null>(null);
|
|
|
|
const mutation = useMutation({
|
|
mutationFn: async () => {
|
|
if (!file) {
|
|
throw new Error('Please select an audio file to upload.');
|
|
}
|
|
await uploadProjectAudio(projectId, file);
|
|
},
|
|
onSuccess
|
|
});
|
|
|
|
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
mutation.mutate();
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="space-y-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
|
|
<div>
|
|
<h2 className="text-lg font-semibold text-slate-900">Upload Audio</h2>
|
|
<p className="text-sm text-slate-600">Attach a new audio track to this project.</p>
|
|
</div>
|
|
<input
|
|
type="file"
|
|
accept="audio/*"
|
|
onChange={(event) => setFile(event.target.files?.[0] ?? null)}
|
|
className="block w-full rounded-md border border-slate-300 px-3 py-2 text-sm"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={mutation.isPending}
|
|
className="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
{mutation.isPending ? 'Uploading...' : 'Upload'}
|
|
</button>
|
|
{mutation.isError && (
|
|
<p className="text-sm text-red-600">{(mutation.error as Error).message}</p>
|
|
)}
|
|
{mutation.isSuccess && <p className="text-sm text-green-600">Audio uploaded successfully!</p>}
|
|
</form>
|
|
);
|
|
}
|