علي يعقوب

بتاريخ 21 ساعات قال Sam Ahw:

يمكننا مساعدتك بشكل أفضل عندما تذكر تفاصيل أكثر مثل كتابة الكود الذي استخدمته لرفع الصور وأيضاً ماهي المكتبة التي تقوم باستخدامها لمعالجة ذلك وأخيراً الجزء الخاص بتحديد الملفات من واجهة المستخدم.

فبما أن رسالة الخطأ هي Cannot read property 'filename' of undefined هذا يعني أنه لا يتم التعرّف على الملف الذي قام المستخدم برفعه ويعود ذلك لعدة أسباب وسأذكر لك بعض النقاط التي قد تساعدك في حل المشكلة:

أولاً: يجب عليك التأكد من أنه يتم تحميل الملف وإرساله مع اسم المتغير الصحيح من واجهة المستخدم وتستطيع ذلك من خلال مراقبة المتغيّرات التي يتم إرسالها بالطلب POST من أدوات تطوير المتصفّح لديك أو من خلال استخدام postman.

ثانياً: يجب عليك التأكد من أن نوع الترميز الخاص بالـ Form الذي تقوم بإرساله من نوع multipart/form-data:

<form method="post" enctype="multipart/form-data" action="/upload">
  ....
</form>

ثالثاً: وبفرض أنك تستخدم المكتبة multer للتعامل مع الملفات في Node JS، يجب عليك التأكد من استخدامها بشكل صحيح كوسيط middleware قبل استقبال القيم إلى المتحكّم الخاص بذلك، وتستطيع الاطلاع عن كيفية تحقيق ذلك من خلال التوثيق لهذه المكتبة أو أي مكتبة تقوم باستخدامها في مشروعك لتحميل الملفات. لأن كل مكتبة لها طريقة تضمين والتعامل معها مختلف.

السلام عليكم 

انا مستخدم هاذا الكود في ال post-controller 

let express = require('express'),

    multer = require('multer'),

    mongoose = require('mongoose'),

    uuidv4=require('uuid')

const DIR = './images/';


const storage = multer.diskStorage({

    destination: (req, file, cb) => {

        cb(null, DIR);

    },

    filename: (req, file, cb) => {

        const fileName = file.originalname.toLowerCase().split(' ').join('-');

         cb(null, uuidv4() + '-' + fileName)
    } 
});


var upload = multer({

    storage: storage,

      limits: {

        fileSize: 1024 * 1024 * 5

    },

    fileFilter: (req, file, cb) => {

        if (file.mimetype == "image/png" || file.mimetype == "image/jpg" || file.mimetype == "image/jpeg") {

            cb(null, true);

        } else {

            cb(null, false);

            return cb(new Error('Only .png, .jpg and .jpeg format allowed!'));
        }
    }

});

// انشاء الصورة

exports.create = (upload.single('image'),(req, res, next) => {

    const url = req.protocol + '://' + req.get('host')

    let model = new Post({

        title: req.body.title,

        content: req.body.content,

        profileImg: `${req.protocol}://${req.get('host')}/images/${req.file.filename}`,

        author: req.user.id
    });

    model.save()

        .then(result => {

            res.status(201).json({

                message: "User registered successfully!",

                userCreated: {

                    _id: result._id,

                    profileImg: result.profileImg

                }
            })
        })

        .catch(err => {

            console.log(err),

                res.status(500).json({

                    error: err

                });
        })
});

وايضا داخل ال craet-post-controller

import React from 'react';

import axios from 'axios';

import "bootstrap/dist/css/bootstrap.min.css";

//import { Button } from 'react-bootstrap';

const createError = require('http-errors');

class CreatePost extends React.Component {

    constructor(props) {

        super(props);

        if (!localStorage.getItem('token')) {

            this.props.history.push('/Login');//move to home page

        }

        this.onChangeTitle = this.onChangeTitle.bind(this);

        this.onChangeContent = this.onChangeContent.bind(this);

        this.onSubmit = this.onSubmit.bind(this);

        this.renderError = this.renderError.bind(this);
        this.state = {

            title: '',

            content: '',

            profileImg: '',

            error: ''
        };

    }

    onChangeTitle(e) {
        this.setState({

            title: e.target.value,

            error: ''

        });

    }
    onChangeContent(e) {

        this.setState({

            content: e.target.value,

            error: ''

        });
    }

    onSubmit(e) {

        e.preventDefault();

        const formData = new FormData()

        formData.append('profileImg', this.state.profileImg)

        let data = {

            title: this.state.title,

            content: this.state.content,

        };

        axios.post('/api/posts', data)

            .then(res => {

                //alert(res.data.token);

                this.props.history.push('/');//move to home page

            })
            .catch(err => {

                if (err.title === ' ' && err.content === ' ') throw createError(404);

                //alert(err.response.data.message)

                this.setState({

                    error: err.response.data.message

               });

            })
    }
    renderError() {
        return this.state.error ? (<blockquote>{this.state.error}</blockquote>) : "";

    }

    render() {

        return (

            <div className="container">

                <div className="row">

                    <h4 className="mb-5"> انشاء صورة</h4>

                    {this.renderError()}

                    <form onSubmit={this.onSubmit} enctype="multipart/form-data">

                        <h3 className="mb-3"> العنوان </h3>

                        <div className="form-group mb-5">

                            <input className="form-input" type="text" value={this.state.title} onChange={this.onChangeTitle} placeholder="اضف عنوان للصورة " />

                        </div>

                        <h3 className="mb-3"> اضافة صورة </h3>

                        <div className="form-group mb-5">

                            <input type="file" className="form-input" name="image" defaultValue={this.state.profileImg} />

                        </div>

                        <h3 className="mb-3"> المحتوى </h3>

                        <div className="form-group mb-5">

                            <textarea className="form-input" value={this.state.content} onChange={this.onChangeContent} placeholder="اضف وصف للصورة "></textarea>

                        </div>

                        <div className="form-group">

                            <button className="btn button-primary button-outline" type="submit">ارسال</button>

                        </div>

                    </form>

                </div>

            </div>
        );
    }
}

export default CreatePost;

وايضا داخل ال post-model

const mongoose=require("mongoose");

const Schema=mongoose.Schema;

const CommentSchema=new Schema({
    content:{
        type:String,
        required:true
    },
    author:{
        type:Schema.Types.ObjectId,

        ref:'User'
    },
    create_at:{
        type:Date,

       default:Date.now  
    },

});

const PostSchema=new Schema({

    title:{

        type:String,

        required:true

    },

    profileImg: {

        type: String

    },

    content:{

        type:String,       

        required:true

    },
    author:{

        type:Schema.Types.ObjectId,

        ref:'User'
    },

    comments:[      

        CommentSchema,

    ],

    create_at:{

        type:Date,

       default:Date.now     

    }, 

});
const Post=mongoose.model('Post',PostSchema);

module.exports=Post;

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

السلام عليكم 

مطلوب مني إنشاء موقع لمشاركة الصور باستخدام React.js و Node.js وقواعد بيانات MongoDB،

بحيث يمكن لأي مستخدم مسجل دخوله رفع الصور سواء كانت PNG أو JPEG

مع عنوانها ووصف خاص بالصورة، وستضاف المعلومات إلى قاعدة البيانات وترفع الصورة إلى الخادم.

وعند اضافة  الكود الخاص برفع الصور تظهر المشكلة التالية Cannot read property 'filename' of undefined

وتظهر في الكنسل xhr.js:177 POST http://localhost:3000/api/posts 500 (Internal Server Error)

ممكن مساعدة؟

السلام عليكم 

ممكن تحكولي شو الفرق بين state and props لانو قرات كثير عنهم

وحاس انها الامور تلخبطت عندي ومشوشه 

ايضا الفرق بين useEffect and useState 

وما علاقة ال useEffect بال componentWillUnmount و componentDidMount

شكرا لكم .

بتاريخ 18 دقائق مضت قال Adnane Kadri:

و عليكم السلام و رحمة الله . 

1. بالنسبة لسؤالك الأول : 

لا يزال عليك عمل التفاعلية المطلوبة بنفسك , بملف index.js قم بإضافة الأسطر التالية : 

$('.collapse')
  .on('show.bs.collapse', function () {
  $(this).prev().find('svg')
    .removeClass('fa-angle-down')
    .addClass('fa-angle-up')
})

  .on('hide.bs.collapse', function () {
  $(this).prev().find('svg')
    .removeClass('fa-angle-up')
    .addClass('fa-angle-down')
});

. و بالطبع يجب عليك تعريف الحالة الإفتراضية للأسهم , إما فوق أو تحت : 

<i class="fa fa-angle-down" aria-hidden="true"></i> 

    2. السؤال الثاني : 

لم يعمل الفيديو بسبب أنك تقوم بتعريف الدالة بعد نسبها للـ Event Listener على هذا النحو : 

var myvideo=document.getElementById("video1");

myvideo.addEventListener("click", function playPause() {
	
    if(myvideo.paused)
    myvideo.play();
    else
    myvideo.pause();
  
}, false);

و : 

 <section class="video">
            <video id="video1">
                <source src="./videos/video.mp4" type="video/mp4">
            </video>
            <div class="overlay ">
                <button onclick="playPause()">
                    <i class="fa fa-video-camera" aria-hidden="true"></i>
                    مشاهدة الفيديو
                </button>
            </div>
        </section>

في حين أنك تستدعي دالة غير معرفة أصلا وإسم هاته الدالة داخل تعريف الـ Event Listener متجاهل أصلا . 

فحل المشكلة إما بتعريف الدالة خارجا على هذا النحو : 

myvideo.addEventListener("click", function(){ playPause(); } , false);


function playPause() {
	
    if(myvideo.paused)
    myvideo.play();
    else
    myvideo.pause();
  
}

أو بربط الEvent Listener بالزر عوضا عن الفيديو نفسه فيكون : 

var myvideo=document.getElementById("video1");
var playVideoButton=document.getElementById("playVideoButton");

playVideoButton.addEventListener("click", function playPause() {
	
    if(myvideo.paused)
    myvideo.play();
    else
    myvideo.pause();
  
}, false);

و طبعا لا تنسى تعريف الزر بـ ID: 

 <section class="video">
            <video id="video1">
                <source src="./videos/video.mp4" type="video/mp4">
            </video>
            <div class="overlay ">
                <button id="playVideoButton">
                    <i class="fa fa-video-camera" aria-hidden="true"></i>
                    مشاهدة الفيديو
                </button>
            </div>
        </section>

و أفضل إستعمال الطريقة الثانية لأن العنصر بالايدي video غير ظاهر و لاحظ أن الoverlay فوقه فهو غير قابل للوصول أما عن الزر فهو غير ذلك . 

أما عن تنسيق زر تشغيل الفيديو فيمكنك إستبدال الأيقونة بغيرها : 

<div class="overlay ">
                <button id="playVideoButton">
                    <i class="fa fa-play" aria-hidden="true"></i> 
                    مشاهدة الفيديو
                    
                </button>
            </div>

و بالطبع لا تنسى أن تقوم بإعادة compile للملفات عن طريق : 

npm run build

 

شكرا كثيرا لك لكنني اواجه مشكلة كيف اعلم بهاذه الامور بحثت كثيرا عن النت لكنني لم اجد اي طريقة كيف تصبح لدي هذه المعرفة وكيف ادرب نفسي ع البحث  لكي استطيع حل مشاكلي بنفسي ؟

لدي سؤالين .

الاول: لماذا عندما اقوم باغلاق الcard  الموجوده داخل الأسئلة الأكثر شيوعاً لا يتغر اتجاه السهم الى الاعلى ؟

الثاني: لماذا عندما لا تظهر ايقونة الفيديو مع تنسيقاتها ؟

وايضا لا يعمل الفيديو عند النقر ع مشاهدة الفيدو او ايقونة الفيدو ؟ وظهر لي هاد الخطا Uncaught ReferenceError: playPause is not defined at HTMLButtonElement.onclick

شكرا لكم واسف ع الاطالة.