Cover Image upload

src/blog/components/Article/ArticleEditor.tsx

@@ -2,10 +2,11 @@ import * as React from 'react';
 import { Box, Typography, Divider, IconButton, Chip, TextField, Button } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import { ArticleMeta } from "../ArticleMeta";
 import { ArticleEditorProps } from '../../types/props';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import ImageUploadField from "../ImageUploadField";
+import { useUpload } from "../../providers/Upload";
 
 const ArticleContainer = styled(Box)(({ theme }) => ({
   maxWidth: '800px',
@@ -29,12 +30,30 @@ export default function ArticleView({
   onBack,
 }: ArticleEditorProps) {
 
+  const { uploadFile } = useUpload();
+
   const [title, setTitle] = React.useState(article?.title ?? "");
   const [description, setDescription] = React.useState(article?.description ?? "");
   const [tag, setTag] = React.useState(article?.tag ?? "");
   const [img, setImg] = React.useState(article?.img ?? "");
+  const [uploadingCoverImage, setUploadingCoverImage] = React.useState(false);
   const [content, setContent] = React.useState(article?.content ?? "");
 
+  const handleCoverImageUpload = async (file: File) => {
+    setUploadingCoverImage(true);
+
+    try {
+      const img = await uploadFile(file);
+      if (img) {
+        setImg(img);
+      }
+    } catch (err) {
+      console.error("Avatar upload failed:", err);
+    } finally {
+      setUploadingCoverImage(false);
+    }
+  };
+
   return (
     <ArticleContainer>
       {/* BACK BUTTON */}
@@ -71,18 +90,14 @@ export default function ArticleView({
 
       <Divider sx={{ mb: 3 }} />
 
-      {/* COVER IMAGE URL */}
-      <TextField
-        label="Cover Image URL"
-        fullWidth
+      <ImageUploadField
+        label="Cover Image"
         value={img}
-        onChange={(e) => setImg(e.target.value)}
-        sx={{ mb: 2 }}
+        uploading={uploadingCoverImage}
+        onUpload={handleCoverImageUpload}
+        size={128}
       />
 
-      {/* COVER IMAGE PREVIEW */}
-      {img && <CoverImage src={img} alt="cover" />}
-
       <Divider sx={{ mb: 3 }} />
 
       {/* MARKDOWN EDITOR */}