Add CTRL-V support as suggested by @p-xiexin

This commit is contained in:
Ray Dumasia
2025-11-15 23:32:33 +00:00
parent e82cd2abf0
commit e24f064042
2 changed files with 44 additions and 3 deletions

View File

@@ -346,11 +346,14 @@ function App() {
{/* Footer */}
<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">
Powered by <span className="gradient-text font-semibold">DeepSeek-OCR</span>
Built with <span className="text-pink-400"></span> using React + FastAPI
</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>
</footer>
</div>

View File

@@ -1,7 +1,7 @@
import { useCallback } from 'react'
import { useCallback, useEffect } from 'react'
import { motion } from 'framer-motion'
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' }) {
const onDrop = useCallback((acceptedFiles) => {
@@ -12,6 +12,38 @@ export default function ImageUpload({ onImageSelect, preview, fileType = 'image'
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({
onDrop,
accept: isPDF ? {
@@ -82,6 +114,12 @@ export default function ImageUpload({ onImageSelect, preview, fileType = 'image'
: 'or click to browse • PNG, JPG, WEBP up to 10MB'
}
</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>
</motion.div>