Add CTRL-V support as suggested by @p-xiexin
This commit is contained in:
@@ -346,11 +346,14 @@ function App() {
|
|||||||
|
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
<footer className="mt-20 border-t border-white/10 glass">
|
<footer className="mt-20 border-t border-white/10 glass">
|
||||||
<div className="max-w-7xl mx-auto px-6 py-8 text-center">
|
<div className="max-w-7xl mx-auto px-6 py-8 text-center space-y-2">
|
||||||
<p className="text-sm text-gray-400">
|
<p className="text-sm text-gray-400">
|
||||||
Powered by <span className="gradient-text font-semibold">DeepSeek-OCR</span> •
|
Powered by <span className="gradient-text font-semibold">DeepSeek-OCR</span> •
|
||||||
Built with <span className="text-pink-400">♥</span> using React + FastAPI
|
Built with <span className="text-pink-400">♥</span> using React + FastAPI
|
||||||
</p>
|
</p>
|
||||||
|
<p className="text-xs text-gray-500">
|
||||||
|
Thanks to <a href="https://github.com/p-xiexin" target="_blank" rel="noopener noreferrer" className="text-purple-400 hover:text-purple-300 transition-colors">@p-xiexin</a> for the clipboard paste idea!
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { useCallback } from 'react'
|
import { useCallback, useEffect } from 'react'
|
||||||
import { motion } from 'framer-motion'
|
import { motion } from 'framer-motion'
|
||||||
import { useDropzone } from 'react-dropzone'
|
import { useDropzone } from 'react-dropzone'
|
||||||
import { Upload, Image as ImageIcon, X, FileText } from 'lucide-react'
|
import { Upload, Image as ImageIcon, X, FileText, Clipboard } from 'lucide-react'
|
||||||
|
|
||||||
export default function ImageUpload({ onImageSelect, preview, fileType = 'image' }) {
|
export default function ImageUpload({ onImageSelect, preview, fileType = 'image' }) {
|
||||||
const onDrop = useCallback((acceptedFiles) => {
|
const onDrop = useCallback((acceptedFiles) => {
|
||||||
@@ -12,6 +12,38 @@ export default function ImageUpload({ onImageSelect, preview, fileType = 'image'
|
|||||||
|
|
||||||
const isPDF = fileType === 'pdf'
|
const isPDF = fileType === 'pdf'
|
||||||
|
|
||||||
|
// Handle clipboard paste
|
||||||
|
useEffect(() => {
|
||||||
|
// Only enable paste for images, not PDFs
|
||||||
|
if (isPDF) return
|
||||||
|
|
||||||
|
const handlePaste = async (e) => {
|
||||||
|
const items = e.clipboardData?.items
|
||||||
|
if (!items) return
|
||||||
|
|
||||||
|
for (let i = 0; i < items.length; i++) {
|
||||||
|
const item = items[i]
|
||||||
|
|
||||||
|
if (item.type.indexOf('image') !== -1) {
|
||||||
|
e.preventDefault()
|
||||||
|
const blob = item.getAsFile()
|
||||||
|
|
||||||
|
if (blob) {
|
||||||
|
// Create a File object with a proper name
|
||||||
|
const file = new File([blob], `pasted-image-${Date.now()}.png`, {
|
||||||
|
type: blob.type,
|
||||||
|
})
|
||||||
|
onImageSelect(file)
|
||||||
|
}
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('paste', handlePaste)
|
||||||
|
return () => document.removeEventListener('paste', handlePaste)
|
||||||
|
}, [onImageSelect, isPDF])
|
||||||
|
|
||||||
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
||||||
onDrop,
|
onDrop,
|
||||||
accept: isPDF ? {
|
accept: isPDF ? {
|
||||||
@@ -82,6 +114,12 @@ export default function ImageUpload({ onImageSelect, preview, fileType = 'image'
|
|||||||
: 'or click to browse • PNG, JPG, WEBP up to 10MB'
|
: 'or click to browse • PNG, JPG, WEBP up to 10MB'
|
||||||
}
|
}
|
||||||
</p>
|
</p>
|
||||||
|
{!isPDF && (
|
||||||
|
<p className="text-xs text-purple-400 mt-2 flex items-center justify-center gap-1.5">
|
||||||
|
<Clipboard className="w-3.5 h-3.5" />
|
||||||
|
<span>Press Ctrl+V to paste from clipboard</span>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|||||||
Reference in New Issue
Block a user