86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState, DragEvent } from 'react'
|
|
|
|
export default function UploadTestPage() {
|
|
const [selectedFile, setSelectedFile] = useState<File | null>(null)
|
|
const [uploading, setUploading] = useState(false)
|
|
const [message, setMessage] = useState('')
|
|
|
|
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0] || null
|
|
setSelectedFile(file)
|
|
setMessage('')
|
|
}
|
|
|
|
const handleDrop = (e: DragEvent<HTMLDivElement>) => {
|
|
e.preventDefault()
|
|
const file = e.dataTransfer.files?.[0]
|
|
if (file) {
|
|
setSelectedFile(file)
|
|
setMessage('')
|
|
}
|
|
}
|
|
|
|
const handleUpload = async () => {
|
|
if (!selectedFile) return
|
|
|
|
const formData = new FormData()
|
|
formData.append('file', selectedFile)
|
|
|
|
setUploading(true)
|
|
setMessage('')
|
|
|
|
try {
|
|
const res = await fetch('/api/files/upload', {
|
|
method: 'POST',
|
|
body: formData,
|
|
})
|
|
|
|
const data = await res.json()
|
|
if (!res.ok) throw new Error(data.message || 'Upload failed')
|
|
|
|
setMessage(`✅ File uploaded: ${data.filename || selectedFile.name}`)
|
|
setSelectedFile(null)
|
|
} catch (err: any) {
|
|
setMessage(`❌ Upload failed: ${err.message}`)
|
|
} finally {
|
|
setUploading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-md mx-auto mt-10 p-6 bg-white rounded shadow space-y-4">
|
|
<h2 className="text-xl font-semibold">File Upload Test</h2>
|
|
|
|
{/* Drag and drop area */}
|
|
<div
|
|
onDrop={handleDrop}
|
|
onDragOver={e => e.preventDefault()}
|
|
className="border-2 border-dashed border-gray-400 rounded p-6 text-center cursor-pointer bg-gray-50 hover:bg-gray-100"
|
|
>
|
|
{selectedFile ? (
|
|
<p>{selectedFile.name}</p>
|
|
) : (
|
|
<p>Drag & drop a file here or click below to select</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* File input */}
|
|
<input type="file" onChange={handleFileChange} className="block" />
|
|
|
|
{/* Upload button */}
|
|
<button
|
|
onClick={handleUpload}
|
|
className="btn btn-primary"
|
|
disabled={!selectedFile || uploading}
|
|
>
|
|
{uploading ? 'Uploading...' : 'Upload'}
|
|
</button>
|
|
|
|
{/* Upload result */}
|
|
{message && <p className="text-sm">{message}</p>}
|
|
</div>
|
|
)
|
|
}
|