محمود سعداوي2

في طرف العميل لم يتم التحقق بيانات المستخدم. المستخدم الذي سيرسل الطلب handlesubmit ليست لديه الصلاحية. عليك إضافة ترويسة الطلب ( request headers) بالتوفيق

السلام عليكم. صحيح تجربتي في تطوير المواقع ضعيفة جدا و لكن أرى أنه خلال التعامل مع الملفات في node js هو أن الموجه الخاص بالملفات منفصل عن الموجه الخاص بجسم الكائن. يعني عزل req.file عن req.boby مثال: إذا كانت المعلومات الخاصة بالمستخدم تحتوي صورة و إسم و ... ، من الأفضل أن يكون الموجه الخاص بصورة المستخدم و الموجه الخاص بالإسم و بقية المعطيات منفصلين. أنتظر آراءكم.

شكرا نفس المشكل أخي لا شيء تغير.

السلام عليكم. في الكود التالي المتغير buttonColor حالته دائما true عند تحديث الصفحة الكود function ImageCard(props) { const navigate = useNavigate(); const [error, setError] = useState(""); const [like, setLike] = useState([]); const { photo, title, author, createdAt, avatar, imageId, likes, edit_remove, handleRemove, userId, } = props; const user = JSON.parse(localStorage.getItem("user")); const imgSrc = photo && require(`../../assets/images/${photo}`); const avatarSrc = avatar ? require(`../../assets/profile/${avatar}`) : defaultUser; const [numLikes, setNumLikes] = useState(likes?.length); const [buttonColor, setButtonColor] = useState(likes.some((item) => item.user === userId)); /** * HandleLike An Image */ const handleLikeImage = async (id) => { if (!user) { navigate("/login"); return; } await axios .put(`/api/images/like/${id}`, like, { headers: { "Content-Type": "application/json", "x-auth-token": user.data.token, }, }) .then((res) => { setLike(res.data); setNumLikes(res.data.likes.length); setButtonColor(!buttonColor); }) .catch((err) => { setError(err.response.data.msg); setTimeout(() => { setError(null); }, 1500); }); }; console.log(buttonColor) return ( <div className="menu"> {edit_remove ? ( <> <div className="delete change" onClick={() => handleRemove(imageId)}> <i className="fa-solid fa-trash"></i> </div> <div className="edit change"> <Link to={`/edit-photo/${imageId}`}> <i className="fa-solid fa-pen-to-square"></i> </Link> </div> </> ) : ( "" )} <div className="menu-img"> <img src={imgSrc} alt={`${title}`} className="img" /> <span className="read-more"> <Link to={`/${imageId}`}> <i className="fa-regular fa-square-plus"></i> </Link> </span> </div> <div className="menu-description"> <img src={avatarSrc} alt="avatar" className="avatar" /> <div className="menu-info"> <h3 className="title">{title}</h3> <p className="date"> created by: <span>{author}</span> at: <span>{moment(createdAt).format("DD-MM-YYYY")}</span> </p> </div> </div> <div className="menu-like"> <div className={buttonColor ? "like isLike" : "like"} onClick={() => { handleLikeImage(imageId); }} > <i className="fa-solid fa-thumbs-up"></i> </div> {numLikes === 0 ? "" : <div className="dislike">{numLikes}</div>} </div> </div> ); } يعني حتى و إن كانت قيمة likes.some((item) => item.user === userId) تساوي false فعند تحديث الصفحة تتحول قيمة buttonColor إلى true شكرا على المساعدة

أعتقد أن النتيجة صحيحة و لا تحتوي أخطاء {isLiked.length > 0: false, likes: Array(2), userId: '654b804c1157c8dc408a4aec', isLiked: Array(0)} isLiked : [] isLiked.length > 0 : false likes : Array(2) 0 : {user: '654aabf3aab1f445eab9faf1', _id: '6552486f570a319a6442a77b'} 1 : {user: '654bef88849d21ff857fb57f', _id: '654bf1f2849d21ff857fb726'} length : 2 [[Prototype]] : Array(0) userId : "654b804c1157c8dc408a4aec" [[Prototype]] : Object ImageCard.jsx:65 {isLiked.length > 0: true, likes: Array(1), userId: '654b804c1157c8dc408a4aec', isLiked: Array(1)} isLiked : Array(1) 0 : {user: '654b804c1157c8dc408a4aec', _id: '654be81ff7cc95c50a0e74fe'} length : 1 [[Prototype]] : Array(0) isLiked.length > 0 : true likes : Array(1) 0 : {user: '654b804c1157c8dc408a4aec', _id: '654be81ff7cc95c50a0e74fe'} length : 1 [[Prototype]] : Array(0) userId : "654b804c1157c8dc408a4aec" [[Prototype]] : Object ImageCard.jsx:65 {isLiked.length > 0: false, likes: Array(2), userId: '654aabf3aab1f445eab9faf1', isLiked: Array(0)} isLiked : [] isLiked.length > 0 : false likes : Array(2) 0 : {user: '654cab8448ef64412386c076', _id: '654cace048ef64412386c0cf'} 1 : {user: '654bef88849d21ff857fb57f', _id: '654bf207849d21ff857fb74c'} length : 2 [[Prototype]] : Array(0) userId : "654aabf3aab1f445eab9faf1" [[Prototype]] : Object ImageCard.jsx:65 {isLiked.length > 0: false, likes: Array(0), userId: '654aabf3aab1f445eab9faf1', isLiked: Array(0)} isLiked : [] isLiked.length > 0 : false likes : [] userId : "654aabf3aab1f445eab9faf1" [[Prototype]] : Object تفضل ملفات المشروع hsoub.zip

تفضل import React, { useState, useEffect } from "react"; import './views.css' import { Link, useNavigate, useParams } from 'react-router-dom'; import moment from 'moment' import axios from "axios"; import Alert from "../alert/Alert"; import defaultUser from "../../assets/photaty/avatar-profile.png" function ImageCard(props) { const navigate = useNavigate(); const [error, setError] = useState(""); const [like, setLike] = useState([]); const { photo, title, author, createdAt, avatar, imageId, likes, edit_remove, handleRemove, userId, } = props; const user = JSON.parse(localStorage.getItem("user")); const imgSrc = photo && require(`../../assets/images/${photo}`); const avatarSrc = avatar ? require(`../../assets/profile/${avatar}`) : defaultUser; const [numLikes, setNumLikes] = useState(likes?.length); const [likedColor, setLikedColor] = useState(false); const [key, setKey] = useState(null); /** * HandleLike An Image */ const handleLikeImage = async (id) => { if (!user) { navigate("/login"); return; } await axios .put(`/api/images/like/${id}`, like, { headers: { "Content-Type": "application/json", "x-auth-token": user.data.token, }, }) .then((res) => { setLike(res.data); setNumLikes(res.data.likes.length); handleLikedColor() // setKey(id) }) .catch((err) => { setError(err.response.data.msg); setTimeout(() => { setError(null); }, 1500); }); }; // console.log(likes) /** * Handle Change Icon Color */ const handleLikedColor = (id) => { const isLiked = likes.filter((item) => item.user === userId); if (isLiked.length > 0) { setLikedColor(true); } else { setLikedColor(false) } }; useEffect(() => { handleLikedColor(); }, [likes, userId]); return ( <div className="menu"> {edit_remove ? ( <> <div className="delete change" onClick={() => handleRemove(imageId)}> <i className="fa-solid fa-trash"></i> </div> <div className="edit change"> <Link to={`/edit-photo/${imageId}`}> <i className="fa-solid fa-pen-to-square"></i> </Link> </div> </> ) : ( "" )} <div className="menu-img"> <img src={imgSrc} alt={`${title}`} className="img" /> <span className="read-more"> <Link to={`/${imageId}`}> <i className="fa-regular fa-square-plus"></i> </Link> </span> </div> <div className="menu-description"> <img src={avatarSrc} alt="avatar" className="avatar" /> <div className="menu-info"> <h3 className="title">{title}</h3> <p className="date"> created by: <span>{author}</span> at: <span>{moment(createdAt).format("DD-MM-YYYY")}</span> </p> </div> </div> <div className="menu-like"> <div className={likedColor ? "like isLike" : "like"} onClick={() => { handleLikeImage(imageId); // console.log(key) }} > <i className="fa-regular fa-thumbs-up"></i> </div> {numLikes === 0 ? "" : <div className="dislike">{numLikes}</div>} </div> </div> ); } export default ImageCard لدي أربع عناصر. في الأولين لم ينجح الكود. أما في البقية فقد نجح الكود.

السلام عليكم. أريد تغيير لون زر الإعجاب عند النقر. إذا كان المعجبين الحاليين بالعنصر يحتوي معرف المستخدم يقع تغيير اللون للأحمر. عند النقر في المرة الثانية يقع حذف المستخدم من قائمة المعجبين و يعود اللون لحاله الأول. في الكود التالي توصلت إلى تحديد عدد المعجبين لكن أواجه مشكل في تغيير اللون عند الإعجاب. الكود /** * HandleLike An Image */ const handleLikeImage = async (id) => { if (!user) { navigate("/login"); return; } await axios .put(`/api/images/like/${id}`, like, { headers: { "Content-Type": "application/json", "x-auth-token": user.data.token, }, }) .then((res) => { setLike(res.data); setNumLikes(res.data.likes.length); handleLikedColor() // setKey(id) }) .catch((err) => { setError(err.response.data.msg); setTimeout(() => { setError(null); }, 1500); }); }; ******************** /** * Handle Change Icon Color */ const handleLikedColor = (id) => { const isLiked = likes.filter((item) => item.user === userId); if (isLiked.length > 0) { setLikedColor(true); } else { setLikedColor(false) } }; useEffect(() => { handleLikedColor(); }, [likes, userId]); ****** <div className="menu-like"> <div className={likedColor ? "like isLike" : "like"} onClick={() => { handleLikeImage(imageId); // console.log(key) }} > <i className="fa-regular fa-thumbs-up"></i> </div> {numLikes === 0 ? "" : <div className="dislike">{numLikes}</div>} </div> شكرا على المساعدة

شكرا. عندما أعدت تشغيل البرنامج صار كل شيء على مايرام شكرا

تفضل أخي الكريمhsoub.zip

السلام عليكم. أواجه مشكل في إرسال بيانات تحتوي صورة بعد تعديلها إلى الخادم. الكود في طرف العميل /** * Update Image Informations */ const [image, setImage] = useState(imageSrc) const [imagePhoto, setImagePhoto] = useState(null) const [title, setTitle] = useState("") const [description, setDescription] = useState("") // console.log(imagePhoto?.name) useEffect(() => { if (current_photo) { setTitle(current_photo?.title || ""); setDescription(current_photo?.description || ""); setImage(imageSrc || ""); } }, [current_photo, imageSrc]); // Handle Change Photo const handleFileChange = (e) => { if (e.target.files && e.target.files[0]) { setImage(URL.createObjectURL(e.target.files[0])); setImagePhoto(e.target.files[0]); } }; const updateImg = (e) => { e.preventDefault(); const formData = new FormData(); formData.append("title", title); formData.append("description", description); if (imagePhoto) { formData.append("photo", imagePhoto, imagePhoto?.name); } // formData.append("photo", imagePhoto) axios .post(`/api/images/user_images/${current_photo?._id}`, formData, { headers: { "Content-Type": "multipart/form-data", "x-auth-token": user.data?.token, }, }) .then((res) => { console.log(res.data); navigate("/"); }) .catch((error) => console.error(error)); }; في طرف الخادم // router router.post("/user_images/:photoId", [upload.single('photo'), protect], editImg); // controller const editImg = async (req, res) => { try { const post = await Image.findById(req.params.photoId) post.title = req.file.title post.description = req.file.description post.photo = req.file ? req.file.filename : post.photo; const updatedPost = await post.save() res.status(200).json(updatedPost); } catch (error) { res.status(500).send("Server error" + error.message); } }; شكرا على المساعدة.

في الكود التالي لا يتم إرسال البيانات في طرف الخادم /** * Update Image Informations */ const [image, setImage] = useState(imageSrc) const [imagePhoto, setImagePhoto] = useState(null) const [title, setTitle] = useState("") const [description, setDescription] = useState("") // console.log(imagePhoto?.name) useEffect(() => { if (current_photo) { setTitle(current_photo?.title || ""); setDescription(current_photo?.description || ""); setImage(imageSrc || ""); } }, [current_photo, imageSrc]); // Handle Change Photo const handleFileChange = (e) => { if (e.target.files && e.target.files[0]) { setImage(URL.createObjectURL(e.target.files[0])); setImagePhoto(e.target.files[0]); } }; const updateImg = (e) => { e.preventDefault(); const formData = new FormData(); formData.append("title", title); formData.append("description", description); if (imagePhoto) { formData.append("photo", imagePhoto, imagePhoto?.name); } // formData.append("photo", imagePhoto) axios .post(`/api/images/user_images/${current_photo?._id}`, formData, { headers: { "Content-Type": "multipart/form-data", "x-auth-token": user.data?.token, }, }) .then((res) => { console.log(res.data); navigate("/"); }) .catch((error) => console.error(error)); }; في طرف العميل // router router.post("/user_images/:photoId", [upload.single('photo'), protect], editImg); // controller const editImg = async (req, res) => { try { const post = await Image.findById(req.params.photoId) post.title = req.file.title post.description = req.file.description post.photo = req.file ? req.file.filename : post.photo; const updatedPost = await post.save() res.status(200).json(updatedPost); } catch (error) { res.status(500).send("Server error" + error.message); } }; شكرا على المساعدة

السلام عليكم. أواجه مشكل في تعديل البيانات بحيث يجب أن تظهر البيانات القديمة للمستخدم داخل حقول الأدخال وأن لاتكون فارغة. في المثال التالي: يجب أن تظهر صورة المستخدم و بقية المعطيات داخل قاعدة البيانات يجب أن تظهر في حقول اإدخال. الكود التالي الذي قمت به يقوم بتعديل البيانات و لكن لا يظهر البيانات القديمة داخل الحقول الخاصة بها. الكود: function PhotoProfile({profile}) { const user = JSON.parse(localStorage.getItem("user")); let profilePhoto = profile?.avatar ? require(`../../assets/profile/${profile.avatar}`) : avatar const [profileAvatar, setProfileAvatar] = useState( null) let [profileImage, setProfileImage] = useState(profilePhoto) const [data, setData] = useState([]) let [name, setName] = useState(profile.name || "") let [bio, setBio] = useState(profile.bio || "") let [status, setStatus] = useState(profile.status || "") const [error, setError] = useState("") const navigate = useNavigate() const handleFileChange = (e) => { if (e.target.files && e.target.files[0]) { setProfileImage(URL.createObjectURL(e.target.files[0])); setProfileAvatar(e.target.files[0]); } }; const handleSave = (e) => { e.preventDefault() const formData = new FormData() formData.append('name', name) formData.append('bio', bio) formData.append('status', status) if (profileAvatar) { formData.append('avatar', profileAvatar, profileAvatar?.name) } axios .post("/api/users/profile", formData, { headers: { "Content-Type": "multipart/form-data", "x-auth-token": user.data?.token, }, }) .then((res) => { setData(res.data) navigate('/') }) .catch((error) => setError(error.response.data.msg)); }; console.log(data) return ( <div className="photo-profile"> <HeaderProfile title="Public profile" paragraphe="Add information about yourself." /> <div className="photo-profile-img"> <img alt="" src={profileImage}/> </div> <form encType="multipart/form-data" className='form-container' onSubmit={handleSave} > {error && <Alert error={error}/>} <input className="photo-profile-input" type="file" name="avatar" accept="image/*" onChange={handleFileChange} /> <input type="text" className="profile-iput-info" placeholder="name" value={name} name="name" onChange={(e)=> setName(e.target.value)} required /> <input type="text" className="profile-iput-info" placeholder="bio" value={bio} name="bio" onChange={(e)=> setBio(e.target.value)} required /> <input type="text" className="profile-iput-info" placeholder="status" value={status} name="status" onChange={(e)=> setStatus(e.target.value)} required /> <button className="submit" type="submit"> Save </button> </form> </div> ); } شكرا للمساعدة.

السلام عليكم. متى يحبك إستعمال cloudinary. و متى يكون إستعمالها عبء على المشروع. شكرا.

السلام عليكم. أواجه مشكل في حساب اللايكات حيث يقع تفعيل الدالة إلا من المرة الثانية const likeImage = async (id) => { if (!user) { navigate("/login"); return; } await axios .put(`/api/images/like/${id}`, like, { headers: { "Content-Type": "application/json", "x-auth-token": user.data.token, }, }) .then((res) => { setLike(res.data) }) .catch((err) => setError(err.response.data.msg)); }; ************************** const unLikeImage = async(id) => { if (!user) { navigate("/login"); return; }; await axios .put(`/api/images/unlike/${id}`, like, { headers: { "Content-Type": "application/json", "x-auth-token": user.data.token, }, }) .then((res) => { setLike(res.data) }) .catch((err) => setError(err.response.data.msg)); }; **************************************** <div className="menu-like"> {/* {error && <Alert error={error} />} */} <div className="like" onClick={() => likeImage(imageId)}> <i className="fa-regular fa-thumbs-up"></i> {likes.length === 0 ? "" : likes.length} </div> <div className="dislike" onClick={() => unLikeImage(imageId)}> <i className="fa-regular fa-thumbs-down"></i> </div> </div> أما بالنسبة لعدد الإعجابات {likes.length === 0 ? "" : likes.length} فلا يظهر إلا بعد تحديث الصفحة. شكرا لكم.

جربت هذا الكود await post.deleteOne() فتمت العملية بنجاح

في هذه الحالة ظهرت رسالة الخطأز post.remove is not a function

السلام عليكم. لحذف صورة من قاعدة البيانات قمت بالكود التالي Router router.delete("/user_images/:photoId", protect, removeImg); Controller const removeImg = async (req, res) => { try { const post = await Image.findById(req.params.photoId); if (!post) { return res.status(404).json({ msg: "Post Not Found" }); } // Check User if (post.user.toString() !== req.user.id) { return res.status(401).json({ msg: "User not authorized" }); } await post.remove res.json({ msg: "Post removed" }); } catch (err) { return res.status(404).json({ msg: "Post Not Found" }); res.status(500).send("Server error"); } }; الواجهة الأمامية const user = JSON.parse(localStorage.getItem("user")); const [photos, setPhotos] = useState([]); const handleRemove = async (id) => { await axios .delete(`/api/images/user_images/${id}`, { headers: { "Content-Type": "application/json", "x-auth-token": user?.data.token, }, }) .then(() => { setPhotos(photos.filter((p) => p._id.toString() !== id.toString())); }) .catch((err) => console.error(err)); }; عند النقر عى زر الحذف يقع حذف الصورة لكن عند تحديث الصفحة تعود الصورة. بالرجوع إلى قاعدة البيانات لاحظت أنه لم يتم حذف الصورة شكرا على المساعدة

المشكل في هذا الكود قمت باستبداله بالكود التالي const onInputChange = (e) => { if (e.target.files && e.target.files[0]) { setImage(URL.createObjectURL(e.target.files[0])); setAvatar(e.target.files[0]); } };

السلام عليكم. أواجه مشكل في إرسال وصف الصورة (Post Method) من طرف العميل (react js) إلى الخادم (node mongo express) و ذلك باستعمال multer الكود في طرف الخادم function ShareImageComponent({}) { const [image, setImage] = useState(null); const [imageTitle, setImageTitle] = useState(""); const [imageDescription, setImageDescription] = useState(""); const user = JSON.parse(localStorage.getItem("user")); const onInputChange = (e) => { if (e.target.files && e.target.files[0]) { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (event) => { const imageUrl = event.target.result; setImage(imageUrl); }; reader.readAsDataURL(file); } } }; /** * Post Image */ const postImage = (e) => { e.preventDefault(); const formData = new FormData(); formData.append("title", imageTitle); formData.append("description", imageDescription); if (image) { formData.append('photo', image) } axios .post("/api/images/new_image", formData, { headers: { "Content-Type": "multipart/form-data", "x-auth-token": user.data?.token, }, }) .then((res) => { console.log(res?.data.data) }) .catch((error) => console.log(error.response.data)); }; return ( <div className="share-container"> <div className="share-img"> <img alt="" src={image} /> </div> <form encType="multipart/form-data" className="share-form-container" onSubmit={(e)=>postImage(e)} > <div className="image-upload"> <label onChange={onInputChange} htmlFor="formId"> <input name="photo" type="file" id="formId" accept="image/*" hidden /> click to upload </label> </div> <input type="text" className="share-title" placeholder="Title ..." name="title" value={imageTitle} onChange={(e) => setImageTitle(e.target.value)} /> <textarea type="text" className="share-description" placeholder="Image Description ..." name="description" value={imageDescription} onChange={(e) => setImageDescription(e.target.value)} /> <button className="submit" type="submit"> Share </button> </form> </div> ); } Image Model const ImageSchema = new Schema({ user: { type: mongoose.Schema.Types.ObjectId, ref: "user", }, title: { type: String, required: true }, description: { type: String, required: true }, photo: { type: String, required: true }, likes: [ { user: { type: Schema.Types.ObjectId } } ], comments: [ { user: { type: Schema.Types.ObjectId }, text: { type: String }, date: { type: Date, default: Date.now } } ], date: { type: Date, default: Date.now } }); route const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, path.join(__dirname, "../../client/src/assets/images/")); }, filename: function (req, file, cb) { cb(null, new Date().toISOString().replace(/:/g, "-") + file.originalname); }, }); const upload = multer({ storage: storage }); router.post( "/new_image", [ upload.single("photo"), [ check("title", "Please enter a title").not().isEmpty(), check("description", "Please enter a description ").not().isEmpty(), ], protect, ], createImg ); controller const createImg = async (req, res) => { const errors = validationResult(req); if (!errors.isEmpty()) { return res.status(400).json({ errors: errors.array() }); } try { // Create New Image const user = await User.findById(req.user.id); if (!user) { return res.status(404).json({ error: "User not found" }); } // const author = user.name; const newImg = new Image({ title: req.body.title, description: req.body.description, photo: req.file?.filename, user: req.user.id, name: user.name, }); const img = await newImg.save(); res.json(img); } catch (error) { console.log(error); res.status(500).send("Server error"); } }; رسالة الخطأ في طرف العميل (console) Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0') رسالة الخطأ في طرف الخادم Error: image validation failed: photo: Path `photo` is required. at ValidationError.inspect (C:\Users\saadaoui\Desktop\photaty\server\node_modules\mongoose\lib\error\validation.js:50:26) at formatValue (node:internal/util/inspect:806:19) at inspect (node:internal/util/inspect:365:10) at formatWithOptionsInternal (node:internal/util/inspect:2273:40) at formatWithOptions (node:internal/util/inspect:2135:10) at console.value (node:internal/console/constructor:340:14) at console.log (node:internal/console/constructor:377:61) at createImg (C:\Users\saadaoui\Desktop\photaty\server\controllers\ImgCtr.js:29:13) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { errors: { photo: ValidatorError: Path `photo` is required. at validate (C:\Users\saadaoui\Desktop\photaty\server\node_modules\mongoose\lib\schematype.js:1364:13) at SchemaType.doValidate (C:\Users\saadaoui\Desktop\photaty\server\node_modules\mongoose\lib\schematype.js:1348:7) at C:\Users\saadaoui\Desktop\photaty\server\node_modules\mongoose\lib\document.js:2958:18 at process.processTicksAndRejections (node:internal/process/task_queues:77:11) { properties: [Object], kind: 'required', path: 'photo', value: undefined, reason: undefined, [Symbol(mongoose:validatorError)]: true } }, _message: 'image validation failed' } شكرا على المساعدة

تفضل Nouveau dossier.zip شكرا Nouveau dossier.zip

في طرف الخادم أستعمل multer const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, path.join(__dirname, "../../client/src/assets/images/")); }, filename: function (req, file, cb) { cb(null, new Date().toISOString().replace(/:/g, "-") + file.originalname); }, }); const upload = multer({ storage: storage }); router.post( "/new_image", [ upload.single("photo"), [ check("title", "Please enter a title").not().isEmpty(), check("description", "Please enter a description ").not().isEmpty(), ], protect, ], createImg ); ************************************ filename = ""; const createImg = async (req, res) => { const errors = validationResult(req); if (!errors.isEmpty()) { return res.status(400).json({ errors: errors.array() }); } try { // Create New Image const user = await User.findById(req.user.id); if (!user) { return res.status(404).json({ error: "User not found" }); } // const author = user.name; const newImg = new Image({ title: req.body.title, description: req.body.description, category: req.body.category, photo: req.file?.filename, user: req.user.id, name: user.name, }); const img = await newImg.save(); res.json(img); } catch (error) { console.log(error); res.status(500).send("Server error"); } }; مع العلم أني لم أجد أي مشكل مع postman

شكرا. لكن لماذا عندما أقوم بإرسال البيانات يقع إعلامي بأن الحقول فارغة مثلا في المثال الذي قدمته يعلمني بأن لا بد من إدخال حقل imageTitle

في الكود التالي const postImage = (e) => { e.preventDefault(); const formData = new FormData(); formData.append("imageTitle", imageTitle); formData.append("imageDescription", imageDescription); console.log({ formData }) console.log({imageDescription}, {imageTitle}) if (image) { formData.append('image', image) } axios .post("/api/images/new_image", formData, { headers: { "Content-Type": "multipart/form-data", "x-auth-token": user.data?.token, }, }) .then((res) => { console.log(res?.data) }) .catch((error) => console.log(error.response.data.errors[0].msg)); }; تتم طباعة imageDescription و imageTitle بينما formData تظهر فارغة {imageDescription: 'fdgdrhrrrrrrr'} {imageTitle: 'dd'} *********************** formData: FormData[[Prototype]]: FormData[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (…)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__() شكرا على المساعدة

السلام عليكم. في الكود التالي لا يمكنني التوجه إلى صفحة تسجيل الدخول const user = JSON.parse(localStorage.getItem('user')) || null useEffect(() => { likeImage(); }, [like]); const likeImage = async () => { user ? await axios .put(`/api/images/like/${imageId}`, { headers: { "Content-Type": "application/json", "x-auth-token": user?.data?.token, }, }) .then((res) => { setLike(res?.data); }) .catch((err) => setError(err.response.data.msg)) : navigate('/login') }; ************************* <div className="like" onClick={likeImage}> <i className="fa-regular fa-thumbs-up"></i> 200 </div> تظهر رسالة الخطأ التالية PUT http://localhost:3000/api/images/like/65381befd6729f8158b384a9 401 (Unauthorized) شكرا لكم على المساعدة

السلام عليكم. قمت بالكود التالي قصد إظهار البيانات الخاصة بالمستخدم (الإسم و الصورة) لكل post. // Get All Images const allImages = async (req, res) => { try { let posts = await Image.find() .sort({ date: -1 }) .populate("user", "name avatar id"); res.json(posts); } catch (error) { console.log(error.message); res.status(500).send("Server error"); } }; Image Model const ImageSchema = new Schema({ user: { type: Schema.Types.ObjectId }, title: { type: String, required: true }, description: { type: String, required: true }, photo: { type: Object, default: { url: "", publicId: null, }, }, likes: [ { user: { type: Schema.Types.ObjectId } } ], comments: [ { user: { type: Schema.Types.ObjectId }, text: { type: String }, date: { type: Date, default: Date.now } } ], date: { type: Date, default: Date.now } }); المشكل هو ظهور الid الخاصة بالمستخدم دون ظهور بقية البيانات شكرا على المساعدة