Skip to content

Commit b9b6f8a

Browse files
leonardcserleonardcser
committed
fix(web): file upload node preview layout
1 parent f8cdd50 commit b9b6f8a

1 file changed

Lines changed: 74 additions & 54 deletions

File tree

  • apps/web/src/components/workflow/widgets

‎apps/web/src/components/workflow/widgets/file.tsx‎

Lines changed: 74 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -97,63 +97,83 @@ function FileWidget({ value, onChange, readonly = false }: FileWidgetProps) {
9797
{value && isObjectReference(value) ? (
9898
<>
9999
{/* Full-screen preview with absolute positioned buttons */}
100-
<div className="relative w-full h-full">
101-
{/* Preview section based on MIME type */}
102-
{isImage && objectUrl && (
103-
<img
104-
src={objectUrl}
105-
alt="Preview"
106-
className="w-full h-full object-contain"
107-
/>
108-
)}
109-
{isAudio && objectUrl && (
110-
<div className="w-full h-full flex items-center justify-center bg-neutral-100">
111-
<audio src={objectUrl} controls className="w-4/5" />
100+
{isAudio && objectUrl ? (
101+
<div className="w-full h-full flex items-center justify-between gap-4 px-2 py-2 bg-neutral-100">
102+
<audio src={objectUrl} controls className="flex-1" />
103+
<div className="flex gap-1 flex-shrink-0">
104+
<Button
105+
variant="ghost"
106+
size="icon"
107+
onClick={downloadFile}
108+
className="h-8 w-8 bg-white/75 hover:bg-white dark:bg-neutral-900/75 dark:hover:bg-neutral-900 border border-neutral-200 dark:border-neutral-700"
109+
disabled={readonly}
110+
title="Download file"
111+
>
112+
<Download className="h-4 w-4" />
113+
</Button>
114+
<Button
115+
variant="ghost"
116+
size="icon"
117+
onClick={clearFile}
118+
className="h-8 w-8 bg-white/75 hover:bg-white dark:bg-neutral-900/75 dark:hover:bg-neutral-900 border border-neutral-200 dark:border-neutral-700"
119+
disabled={readonly}
120+
title="Remove file"
121+
>
122+
<Trash2 className="h-4 w-4" />
123+
</Button>
112124
</div>
113-
)}
114-
{isVideo && objectUrl && (
115-
<video
116-
src={objectUrl}
117-
controls
118-
className="w-full h-full object-contain"
119-
/>
120-
)}
121-
{!isImage && !isAudio && !isVideo && objectUrl && (
122-
<div className="w-full h-full flex flex-col items-center justify-center bg-neutral-50 gap-4 py-2">
123-
<File className="h-10 w-10 text-neutral-400" />
124-
<div className="text-center">
125-
<p className="text-sm font-medium text-neutral-700">
126-
{getMimeTypeDisplay(mimeType)}
127-
</p>
128-
<p className="text-xs text-neutral-500">File uploaded</p>
125+
</div>
126+
) : (
127+
<div className="relative w-full h-full">
128+
{/* Preview section based on MIME type */}
129+
{isImage && objectUrl && (
130+
<img
131+
src={objectUrl}
132+
alt="Preview"
133+
className="w-full h-full object-contain"
134+
/>
135+
)}
136+
{isVideo && objectUrl && (
137+
<video
138+
src={objectUrl}
139+
controls
140+
className="w-full h-full object-contain"
141+
/>
142+
)}
143+
{!isImage && !isVideo && objectUrl && (
144+
<div className="w-full h-full flex items-center justify-between gap-4 px-2 py-2 bg-neutral-50">
145+
<div className="flex items-center gap-3 min-w-0">
146+
<File className="h-5 w-5 text-neutral-400 flex-shrink-0" />
147+
<p className="text-sm font-medium text-neutral-700 truncate">
148+
{getMimeTypeDisplay(mimeType)}
149+
</p>
150+
</div>
151+
<div className="flex gap-1 flex-shrink-0">
152+
<Button
153+
variant="ghost"
154+
size="icon"
155+
onClick={downloadFile}
156+
className="h-8 w-8 bg-white/75 hover:bg-white dark:bg-neutral-900/75 dark:hover:bg-neutral-900 border border-neutral-200 dark:border-neutral-700"
157+
disabled={readonly}
158+
title="Download file"
159+
>
160+
<Download className="h-4 w-4" />
161+
</Button>
162+
<Button
163+
variant="ghost"
164+
size="icon"
165+
onClick={clearFile}
166+
className="h-8 w-8 bg-white/75 hover:bg-white dark:bg-neutral-900/75 dark:hover:bg-neutral-900 border border-neutral-200 dark:border-neutral-700"
167+
disabled={readonly}
168+
title="Remove file"
169+
>
170+
<Trash2 className="h-4 w-4" />
171+
</Button>
172+
</div>
129173
</div>
130-
</div>
131-
)}
132-
133-
{/* Top-right action buttons */}
134-
<div className="absolute top-2 right-2 z-10 flex gap-1">
135-
<Button
136-
variant="ghost"
137-
size="icon"
138-
onClick={downloadFile}
139-
className="h-8 w-8 bg-white/75 hover:bg-white dark:bg-neutral-900/75 dark:hover:bg-neutral-900 border border-neutral-200 dark:border-neutral-700"
140-
disabled={readonly}
141-
title="Download file"
142-
>
143-
<Download className="h-4 w-4" />
144-
</Button>
145-
<Button
146-
variant="ghost"
147-
size="icon"
148-
onClick={clearFile}
149-
className="h-8 w-8 bg-white/75 hover:bg-white dark:bg-neutral-900/75 dark:hover:bg-neutral-900 border border-neutral-200 dark:border-neutral-700"
150-
disabled={readonly}
151-
title="Remove file"
152-
>
153-
<Trash2 className="h-4 w-4" />
154-
</Button>
174+
)}
155175
</div>
156-
</div>
176+
)}
157177
</>
158178
) : (
159179
<label

0 commit comments

Comments
 (0)