Блог

Мои изображения не будут загружаться. Является ли отдельная функция причиной ошибки в функции onsubmit? Я смог загрузить остальную часть входных данных до добавления раздела загрузки изображений. Я также получаю ошибку при отправке с серверной части, в которой говорится, что ошибка типа не может прочитать исходное имя неопределенного. Я новичок в бэкэнде, поэтому заранее приношу извинения, если мой вопрос плохой.

 import React, {useState,useContext, useEffect} from 'react'
import PropertyItem from './PropertyItem';
import PropertyService from '../Services/PropertyService';
import Message from './Message'
import {AuthContext} from '../Context/AuthContext';


const Properties = props =>{
    const [property,setProperty] = useState({
        
        street : "",
        town : "",
        area : "",
        PostCode : "",
        NoBeds : "",
        NoBath : "",
        NoLivingRooms : "",
    })
    const [properties,setProperties] = useState ([]);
    const [propertyImage,setPropertyImage] = useState ([]);
    const [message,setMessage] = useState(null);
    const authContext = useContext(AuthContext);

    useEffect(()=>{
        PropertyService.getProperties().then(data =>{
            setProperties(data.properties);
        });
    },[]);

    const onSubmit = e =>{
        e.preventDefault();
        PropertyService.postProperty(property).then(data =>{
            const {message } = data;
            resetForm();
            if(!message.msgError){
                PropertyService.getProperties().then(getData =>{
                    setProperties(getData.properties);
                    setMessage(message);
                });
            }
            else if(message.msgBody === "UnAuthorized"){
                setMessage(message);
                authContext.setUser({username : ""});
                authContext.setIsAuthenticated(false);
            }
            else{
                setMessage(message);
            }
        },[]);
    }
     
    const onChange = e =>{
        setProperty({...property,[e.target.name] : e.target.value})
    }
    const onChangefile = e =>{
        setPropertyImage(e.target.files[0])
    }

    const resetForm = ()=>{
        setProperty({
        propertyImage: [0],
        street : "",
        town : "",
        area : "",
        PostCode : "",
        NoBeds : "",
        NoBath : "",
        NoLivingRooms : "",
        });
    }

    return(
        <div>
            <ul className="">
                {
                    properties.map((property) =>{
                        return <PropertyItem key={property._id} 
            property={property} 
            street={property.street}
            town={property.town}
            area={property.area}
            PostCode={property.PostCode}
            NoBeds={property.NoBeds}
            NoBath={property.NoBath}
            NoLivingRooms={property.NoLivingRooms}
            propertyImage={property.propertyImage}
            />
                    },[])
                }
            </ul>
            <br/>
            <form onSubmit={onSubmit} encType="multipart/form-data">
                <label htmlFor="street">Street Name</label>
                <input type="text" 
                       name="street" 
                       value={property.street}
                       onChange={onChange}
                       className=""
                       placeholder="street name"/>
                <label htmlFor="town">Town</label>
                <input type="text" 
                       name="town" 
                       value={property.town}
                       onChange={onChange}
                       className=""
                       placeholder="town"/>
                <label htmlFor="area">Area</label>
                <input type="text" 
                       name="area" 
                        value={property.area}
                       onChange={onChange}
                       className=""
                       placeholder="area"/>
                <label htmlFor="postcode">Postcode</label>
                <input type="text" 
                       name="PostCode" 
                       value={property.PostCode}
                       onChange={onChange}
                       className=""
                       placeholder="Postcode"/>
                <label htmlFor="NoBeds">Beds</label>
                <input type="number" 
                       name="NoBeds" 
                       value={property.NoBeds}
                       onChange={onChange}
                       className=""
                       placeholder="Number of beds"/>
                <label htmlFor="NoBath">Bathrooms</label>
                <input type="number" 
                       name="NoBath" 
                        value={property.NoBath}
                       onChange={onChange}
                       className=""
                       placeholder="Number of bathrooms"/>
                <label htmlFor="NoLivingRooms">Living Rroom</label>
                <input type="number" 
                       name="NoLivingRooms" 
                        value={property.NoLivingRooms}
                       onChange={onChange}
                       className=""
                       placeholder="Number of living rooms"/>
                <label htmlFor="propertyImage">Property Images</label>
                <input type="file" 
                       filename="propertyImage" 
                       value={property.propertyImage}
                       onChange={onChangefile}
                       className=""
                       placeholder="Upload property images"/>
                <button className="" 
                        type="submit">Submit</button>
            </form>
            {message ? <Message message={message}/> : null}
        </div>
    );

}


export default Properties
 

  userRouter.post('/property', upload.single("propertyImage"),passport.authenticate('jwt',{session : false}),(req,res)=>{
    const property = new Property({
        street: req.body.street,
        town: req.body.town,
        area: req.body.area,
        PostCode: req.body.PostCode,
        NoBeds: req.body.NoBeds,
        NoBath: req.body.NoBath,
        NoLivingRooms: req.body.NoLivingRooms,
        propertyImage: req.file.originalname
    });

    property.save(err=> {
        if(err)
         res.status(500).json({message : {msgBody: "Error has occured", msgError : true}});
        else{
            req.user.properties.push(property);
            
            req.user.save(err=> {
                if(err)
                 res.status(500).json({message : {msgBody: "Error has occured", msgError : true}});
                 else
                 res.status(200).json({message: {msgBody: "Successfully created property", msgError : false}});
            })
        }
    })
});