yusufipek/OpenFrame
1
0
Fork 0
mirror of https://github.com/yusufipk/OpenFrame.git synced 2026-09-11 09:36:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(comments): add drag-and-drop support for image attachments and enhance image validation

Browse Source
This commit is contained in:
Yusuf İpek
2026-03-01 18:53:54 +03:00
parent 147e5520a3
commit 75535e8cda
5 changed files with 64 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/video-page/assets-pane.tsx
+6 -6
View File
@@ -256,7 +256,7 @@ export const AssetsPane = memo(function AssetsPane({
const handleImageUpload = useCallback(async (file: File) => {
if (!file) return;
const imageError = validateImageFile(file);
const imageError = await validateImageFile(file);
if (imageError) {
toast.error(imageError);
return;
@@ -297,7 +297,7 @@ export const AssetsPane = memo(function AssetsPane({
const handleImageFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (!file) return;
const imageError = validateImageFile(file);
const imageError = await validateImageFile(file);
if (imageError) {
toast.error(imageError);
return;
@@ -306,16 +306,16 @@ export const AssetsPane = memo(function AssetsPane({
toast.success('Image attached. Click Upload Image to send.');
};
const handleImagePaste = (event: React.ClipboardEvent<HTMLDivElement>) => {
const handleImagePaste = async (event: React.ClipboardEvent<HTMLDivElement>) => {
if (uploadTab !== 'image' || !canUploadAssets || isCreatingAsset) return;
const pastedImage = extractPastedImageFile(event.clipboardData);
if (!pastedImage) return;
const imageError = validateImageFile(pastedImage);
event.preventDefault();
const imageError = await validateImageFile(pastedImage);
if (imageError) {
toast.error(imageError);
return;
}
event.preventDefault();
setPendingImageFile(pastedImage);
toast.success('Image attached from clipboard. Click Upload Image to send.');
};
@@ -582,7 +582,7 @@ export const AssetsPane = memo(function AssetsPane({
if (!file) return;
if (file.type.startsWith('image/')) {
const imageError = validateImageFile(file);
const imageError = await validateImageFile(file);
if (imageError) { toast.error(imageError); return; }
// Stage the file so the user can optionally set a name before uploading
setUploadTab('image');
components/video-page/comments-pane.tsx
+23 -8
View File
@@ -1,6 +1,6 @@
'use client';
import { memo, type ReactNode, type RefObject } from 'react';
import { memo, useState, type ReactNode, type RefObject } from 'react';
import { ArrowUpRight, CheckCircle2, ChevronDown, Circle, Clock, Download, FileText, FolderOpen, Image as ImageIcon, Loader2, MessageSquare, Mic, MoreVertical, Pause, Pencil, Play, Reply, Tag, Trash2, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
@@ -78,6 +78,7 @@ interface CommentsPaneProps {
replyImageInputRef: RefObject<HTMLInputElement | null>;
handleImageSelect: (e: React.ChangeEvent<HTMLInputElement>, isReply?: boolean) => void;
handlePaste: (e: React.ClipboardEvent<HTMLTextAreaElement>, isReply?: boolean) => void;
handleDrop: (e: React.DragEvent<HTMLDivElement>, isReply?: boolean) => void;
submitReplyWithMedia: (parentId: string) => void;
isSubmittingReply: boolean;
isUploadingReplyAudio: boolean;
@@ -147,6 +148,7 @@ export const CommentsPane = memo(function CommentsPane({
replyImageInputRef,
handleImageSelect,
handlePaste,
handleDrop,
submitReplyWithMedia,
isSubmittingReply,
isUploadingReplyAudio,
@@ -158,6 +160,8 @@ export const CommentsPane = memo(function CommentsPane({
setActivePane,
assetsPane,
}: CommentsPaneProps) {
const [isPaneDraggingOver, setIsPaneDraggingOver] = useState(false);
return (
<>
<div
@@ -168,13 +172,24 @@ export const CommentsPane = memo(function CommentsPane({
onClick={() => setIsMobileCommentsOpen(false)}
/>
<div className={cn(
'bg-card flex flex-col overflow-hidden z-50',
'fixed inset-y-0 right-0 w-[85%] sm:w-[400px] shadow-2xl transition-transform duration-300 transform',
isMobileCommentsOpen ? 'translate-x-0' : 'translate-x-full',
'lg:static lg:w-80 lg:shrink-0 lg:border-l lg:transition-none lg:translate-x-0 lg:shadow-none lg:z-auto',
isFullscreenMode && !showComments ? 'hidden' : ''
)}>
<div
className={cn(
'bg-card flex flex-col overflow-hidden z-50 relative',
'fixed inset-y-0 right-0 w-[85%] sm:w-[400px] shadow-2xl transition-transform duration-300 transform',
isMobileCommentsOpen ? 'translate-x-0' : 'translate-x-full',
'lg:static lg:w-80 lg:shrink-0 lg:border-l lg:transition-none lg:translate-x-0 lg:shadow-none lg:z-auto',
isFullscreenMode && !showComments ? 'hidden' : ''
)}
onDragOver={(e) => { if (activePane !== 'comments') return; e.preventDefault(); setIsPaneDraggingOver(true); }}
onDragEnter={(e) => { if (activePane !== 'comments') return; e.preventDefault(); setIsPaneDraggingOver(true); }}
onDragLeave={(e) => { if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsPaneDraggingOver(false); }}
onDrop={(e) => { setIsPaneDraggingOver(false); if (activePane !== 'comments') return; handleDrop(e, replyingTo !== null); }}
>
{isPaneDraggingOver && (
<div className="absolute inset-0 z-20 flex items-center justify-center border-2 border-dashed border-primary bg-primary/10 pointer-events-none">
<p className="text-sm font-medium text-primary">Drop image to attach</p>
</div>
)}
<div className="shrink-0 p-4 border-b lg:cursor-default space-y-2">
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-1 min-w-0 overflow-x-auto">
components/video-page/hooks/use-comment-actions.ts
+24 -4
View File
@@ -7,6 +7,7 @@ import {
useState,
type ChangeEvent,
type ClipboardEvent,
type DragEvent,
type Dispatch,
type RefObject,
type SetStateAction,
@@ -284,11 +285,11 @@ export function useCommentActions({
fetchAssets,
]);
const handleImageSelect = useCallback((e: ChangeEvent<HTMLInputElement>, isReply: boolean = false) => {
const handleImageSelect = useCallback(async (e: ChangeEvent<HTMLInputElement>, isReply: boolean = false) => {
const file = e.target.files?.[0];
if (!file) return;
const imageError = validateImageFile(file);
const imageError = await validateImageFile(file);
if (imageError) {
toast.error(imageError);
return;
@@ -301,11 +302,12 @@ export function useCommentActions({
}
}, []);
const handlePaste = useCallback((e: ClipboardEvent<HTMLTextAreaElement>, isReply: boolean = false) => {
const handlePaste = useCallback(async (e: ClipboardEvent<HTMLTextAreaElement>, isReply: boolean = false) => {
const file = extractPastedImageFile(e.clipboardData);
if (!file) return;
e.preventDefault();
const imageError = validateImageFile(file);
const imageError = await validateImageFile(file);
if (imageError) {
toast.error(imageError);
return;
@@ -316,7 +318,24 @@ export function useCommentActions({
} else {
setImageBlob(file);
}
}, []);
const handleDrop = useCallback(async (e: DragEvent<HTMLDivElement>, isReply: boolean = false) => {
e.preventDefault();
const file = extractPastedImageFile(e.dataTransfer);
if (!file) return;
const imageError = await validateImageFile(file);
if (imageError) {
toast.error(imageError);
return;
}
if (isReply) {
setReplyImageBlob(file);
} else {
setImageBlob(file);
}
}, []);
const startRecording = useCallback(async () => {
@@ -961,6 +980,7 @@ export function useCommentActions({
handleAddComment,
handleImageSelect,
handlePaste,
handleDrop,
startRecording,
stopRecording,
cancelRecording,
components/video-page/image-upload-utils.ts
+9 -5
View File
@@ -1,16 +1,20 @@
'use client';
import { detectImageMime } from '@/lib/image-upload-validation';
export const MAX_IMAGE_UPLOAD_BYTES = 10 * 1024 * 1024;
export function validateImageFile(file: File): string | null {
if (!file.type.startsWith('image/')) {
return 'Please select an image file';
}
export async function validateImageFile(file: File): Promise<string | null> {
if (file.size > MAX_IMAGE_UPLOAD_BYTES) {
return 'Image must be less than 10MB';
}
const header = await file.slice(0, 12).arrayBuffer();
const detected = detectImageMime(new Uint8Array(header));
if (!detected) {
return 'Unsupported image format. Allowed: JPEG, PNG, GIF, WEBP';
}
return null;
}