Ahmed Zehry

لدي نموذج في قاعدة بيانات mongo هذا هو /** * Module dependencies. */ const mongoose = require("mongoose"); /** * Schema definition */ const ModelSchema = new mongoose.Schema( { name: { type: String, required: true, unique: true, }, pathname:{ type: String, required: true, unique: true, }, title: { type: String, unique: true, default: function() { return this.name; } }, desc: { type: Array, required: true, default:[""] }, image: { data: Buffer, contentType:String }, }, { timestamps: true, } ); ModelSchema.set("toJSON", { virtuals: true, versionKey: false, transform: (doc, ret) => { delete ret._id; }, }); const Model = mongoose.model("MainCategory", ModelSchema); module.exports = Model; اريد ارسال الصور له عبر صفحة react import React, { useEffect, useState } from 'react' import { AppFooter, AppHeader, AppSidebar, DocsExample } from '../../../components' import axios from 'axios' import { CButton, CForm, CFormInput, CFormLabel, CFormTextarea } from '@coreui/react' export default function programs() { const [name, setname] = useState('') const [image, setimage] = useState(null) const [pathname, setpath] = useState('') const [title, settitle] = useState() const handleImageChange = (e) => { const file = e.target.files[0]; const formData = new FormData(); formData.append("image", file); setimage(formData); }; const handleSubmit = async (e) => { e.preventDefault() try { await axios.post('https://api.wesamelnagah.com/api/maincategory', { name, pathname, image, headers: { "Content-Type": "multipart/form-data", }, // title }) await axios.post('https://api.wesamelnagah.com/api/uplode',image, { headers: { "Content-Type": "multipart/form-data", }, }) setname('') setimage(null) setpath('') } catch (error) { console.log(error) } } return ( <div className="programs_container"> <AppSidebar /> <div className="wrapper d-flex flex-column min-vh-100"> <AppHeader /> <div className="body flex-grow-1"> <CForm onSubmit={handleSubmit}> <div className="mb-3"> <CFormLabel htmlFor="exampleFormControlInput1"> عنوان الباقة</CFormLabel> <CFormInput type="text" id="exampleFormControlInput1" onChange={(e) => setname(e.target.value)} /> <CFormLabel htmlFor="exampleFormControlInput1"> مسار الباقة</CFormLabel> <CFormInput type="text" id="exampleFormControlInput1" onChange={(e) => setpath(e.target.value)} /> </div> <div className="mb-3"> <CFormLabel htmlFor="formFile">صورة الباقة</CFormLabel> <CFormInput type="file" id="formFile" onChange={handleImageChange} /> </div> <div className="d-grid gap-2 col-6 mx-auto"> <CButton color="primary" type="submit"> Submit </CButton> </div> </CForm> </div> <AppFooter /> </div> </div> ) } هل يستطيع احد مساعدتي للقيام بذلك

شكرا لك لدي طلب اخر بعد اذنك اريد حفظ اسم الصورة ومسارها مع الكائن الذي سيرسل الى قاعدة البيانات

لم تظهر ايضا ... هكذا عدلت اسم الحقل هل هذا صحيح const handleImageChange = (e) => { const file = e.target.files[0]; const formData = new FormData(); formData.append("image", image); setimage(formData); console.log(image.type); };

import React, { useEffect, useState } from 'react' import { AppFooter, AppHeader, AppSidebar, DocsExample } from '../../../components' import axios from 'axios' import { CButton, CForm, CFormInput, CFormLabel, CFormTextarea } from '@coreui/react' export default function programs() { const [name, setname] = useState('') const [image, setimage] = useState(null) const [pathname, setpath] = useState('') const [title, settitle] = useState() const handleImageChange = (e) => { const file = e.target.files[0]; setimage(file); console.log(file.type); }; const handleSubmit = async (e) => { e.preventDefault() try { await axios.post('https://api.wesamelnagah.com/api/maincategory', { name, pathname, // title }) await axios.post('https://api.wesamelnagah.com/api/uplode', { image, }) setname('') setimage(null) setpath('') } catch (error) { console.log(error) } } console.log(typeof image); return ( <div className="programs_container"> <AppSidebar /> <div className="wrapper d-flex flex-column min-vh-100"> <AppHeader /> <div className="body flex-grow-1"> <CForm onSubmit={handleSubmit}> <div className="mb-3"> <CFormLabel htmlFor="exampleFormControlInput1"> عنوان الباقة</CFormLabel> <CFormInput type="text" id="exampleFormControlInput1" onChange={(e) => setname(e.target.value)} /> <CFormLabel htmlFor="exampleFormControlInput1"> مسار الباقة</CFormLabel> <CFormInput type="text" id="exampleFormControlInput1" onChange={(e) => setpath(e.target.value)} /> </div> <div className="mb-3"> <CFormLabel htmlFor="formFile">صورة الباقة</CFormLabel> <CFormInput type="file" id="formFile" onChange={handleImageChange} /> </div> <div className="d-grid gap-2 col-6 mx-auto"> <CButton color="primary" type="submit"> Submit </CButton> </div> </CForm> </div> <AppFooter /> </div> </div> ) } لدي هذا الform وعند ارسال الصور ترجع لي استجابة نجاح ولكن الصورة لا تذهب الى المجلد الخاص بالصور مع العلم انني عندما قمت باختبار api على postman نجحت وذهبت الصور الى المجلد المقصود فاين الخطا في كود react ؟

لدي مشروع صفحة ادمن باستخدام react ,node &mongodb كيف اجعل الادمن عند رفع صورة ترفع على aws ويعيد لي الرابط ويقوم بحفظه في خاصية باسم image في mongodb

قمت بهذه الخطوات ولكن لم تظهر الخاصيه image في mongodb الاولى هذه بالطريقة القديمة ولكن بعد التعديل لم تظهر في الثانية

لدي تطبيق اريد فيه رفع صور ضمن قاعدة البيانات داخل هذا النموذج const ModelSchema = new mongoose.Schema( { name: { type: String, required: true, unique: true, }, pathname:{ type: String, required: true, unique: true, }, title: { type: String, unique: true, }, desc: { type: Array, required: true, default:[""] }, image: { type: String, required: true, }, }, { timestamps: true, } ); هل يستطيع احد اخباري بالطريقة التي يتم بها الامر

export default defineConfig(({ mode }) => { // Load .env const env = loadEnv(mode, process.cwd(), '') process.env = { ...process.env, ...env } return { base: './', build: { outDir: 'build', }, css: { postcss: { plugins: [ autoprefixer({}), // add options if needed ], }, }, define: { // vitejs does not support process.env so we have to redefine it 'process.env': process.env, }, esbuild: { loader: 'jsx', include: /src\/.*\.jsx?$/, exclude: [], }, optimizeDeps: { force: true, esbuildOptions: { loader: { '.js': 'jsx', }, }, }, plugins: [react()], resolve: { alias: [ { find: 'src/', replacement: `${path.resolve(__dirname, 'src')}/`, }, ], extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.scss'], }, server: { port: 90, proxy: { // https://vitejs.dev/config/server-options.html }, }, } }) الدالة لدي بهذا الشكل كيف اقوم بتعديلها؟

قمت بذلك ولم تعمل ايضا

انا لا استخدم BrowserRouter واستخدم بدلا منها HashRouter وهذا رابط المشروع اذا كنت تستطيع القاء نظرة عليه: https://github.com/ahmedzehry55/wesam-backendreact.git

التطبيق لايعمل بشكل سليم ويظهر هذا الخطا يظهر هذا الخطا عند الدخول على wesamelnagah.com/admin/

لدي تطبيقين الاول next.js ويعمل على النطاق الرئيسي wesamelnagah.com ولدي مشروع react للادمن يعمل على هذا المسار wesamelnagah.com:90 واريد رفعه على هذا النطاق wesamelnagah.com/admin

الف شكر لحضرتك اشتغل المشروع بشكل سليم اذا سمحت هل تسطيع ان تشرح لي ما وظيفة --host التي اضافتها ولماذا لم يكن يعمل بدونها ؟

عندما قمت بذلك لما يعمل ايضا وهذا ما يظهر لي لدي ايضا على نفس السيرفر مشروع node و مشروع next.js وكلاهما يعملان بشكل جيد هل يمكن ان يكون ذلك مؤثرا ؟

لدي مشروع react مرفوع على السيرفر ولكن عند القيام بتنفيذ الامر npm run start يظهر لي انه يعمل على ال port :1001 ولكن عندما افتح المتصفح لا يعمل هل يستطيع احد مساعدتي رابط المشروع على github : https://github.com/ahmedzehry55/wesam-backendreact.git