feat: add cover image upload functionality with loading state in article creation form

src/ui/components/internal/file-upload-field.tsx

@@ -6,6 +6,7 @@ import {
     FieldDescription,
     FieldError,
 } from '@/ui/components/shadcn/field';
+import { Spinner } from '@/ui/components/shadcn/spinner';
 import {
     FileUpload,
     FileUploadDropzone,
@@ -29,6 +30,8 @@ export interface FileUploadFieldProps {
     description?: string;
     error?: string;
     icon?: React.ReactNode;
+    previewUrl?: string;
+    isUploading?: boolean;
 }
 
 export const FileUploadField: React.FC<FileUploadFieldProps> = ({
@@ -41,6 +44,8 @@ export const FileUploadField: React.FC<FileUploadFieldProps> = ({
     description,
     error,
     icon,
+    previewUrl,
+    isUploading,
 }) => {
     const handleAccept = useCallback(
         (files: File[]) => {
@@ -90,7 +95,24 @@ export const FileUploadField: React.FC<FileUploadFieldProps> = ({
                 <FileUploadList>
                     {file && (
                         <FileUploadItem value={file}>
-                            <FileUploadItemPreview />
+                            <FileUploadItemPreview
+                                render={
+                                    isUploading
+                                        ? () => (
+                                              <Spinner className='size-5 text-muted-foreground' />
+                                          )
+                                        : previewUrl
+                                          ? () => (
+                                                // eslint-disable-next-line @next/next/no-img-element
+                                                <img
+                                                    src={previewUrl}
+                                                    alt='Uploaded image'
+                                                    className='size-full object-cover'
+                                                />
+                                            )
+                                          : undefined
+                                }
+                            />
                             <FileUploadItemMetadata size='sm' />
                             <FileUploadItemDelete asChild>
                                 <Button