diff --git a/src/components/AddCardModal.tsx b/src/components/AddCardModal.tsx index 626a697..b059701 100644 --- a/src/components/AddCardModal.tsx +++ b/src/components/AddCardModal.tsx @@ -89,7 +89,7 @@ export const AddCardModal: React.FC = ({ isOpen, onClose, onA -
+ {/* Card Type */}
@@ -159,15 +159,30 @@ export const AddCardModal: React.FC = ({ isOpen, onClose, onA
setImageUrl(e.target.value)} - placeholder="Or paste an image URL (https://...)" + placeholder="Or paste an image URL (https://... or /uploads/...)" className="w-full bg-neutral-800 border border-neutral-700 rounded px-2.5 py-1.5 text-neutral-100 focus:outline-none focus:border-amber-500 text-[11px]" /> {imageUrl && ( -
- Preview +
+
+ Preview +
+
+ + ✓ Photo Ready + + {imageUrl} + +
)}
@@ -246,13 +261,50 @@ export const EditCardModal: React.FC = ({ const [title, setTitle] = useState(card.title || ''); const [content, setContent] = useState(card.content || ''); const [color, setColor] = useState(card.color || '#FFF9A6'); + const [imageUrl, setImageUrl] = useState(card.imageUrl || ''); + const [isUploading, setIsUploading] = useState(false); + + const handleEditFileUpload = (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + if (!file) return; + + const reader = new FileReader(); + reader.onload = (ev) => { + if (typeof ev.target?.result === 'string') { + setImageUrl(ev.target.result); + } + }; + reader.readAsDataURL(file); + + setIsUploading(true); + const formData = new FormData(); + formData.append('file', file); + + fetch('/api/upload', { + method: 'POST', + body: formData + }) + .then((res) => res.json()) + .then((data) => { + setIsUploading(false); + if (data.success && data.url) { + setImageUrl(data.url); + } + }) + .catch((err) => { + console.warn('Upload error:', err); + setIsUploading(false); + }); + }; const handleSave = () => { onSave({ ...card, title: title.trim() || undefined, content: content.trim(), - color + color, + imageUrl: card.type === 'polaroid' ? (imageUrl.trim() || undefined) : card.imageUrl, + photoCaption: card.type === 'polaroid' ? (title.trim() || content.trim()) : undefined }); onClose(); }; @@ -281,15 +333,61 @@ export const EditCardModal: React.FC = ({
- +