estoy creando una aplicación con React y con componentes de clase, el objetivo es crear artículos para un blog. Estoy utilizando mongodb como base de datos y hasta ahora todo me funcionaba correctamente. Al crear el artículo me guarda y me redirecciona correctamente si no le pongo la imagen, pero al poner la imagen no me la guarda. En la consola no me da ningun error y no se como solucionarlo. Gracias por vuestra ayuda.
Aquí el componente de CreateArticle.js
import React, { Component } from 'react';
import Sidebar from '../Sidebar/Sidebar';
import Global from '../../Global';
import axios from 'axios';
import { Navigate } from 'react-router-dom';
class CreateArticle extends Component {
url = Global.url;
titleRef = React.createRef();
contentRef = React.createRef();
state = {
article : {},
status : null,
selectedFile : null
};
changeState = () => {
this.setState ({
article : {
title: this.titleRef.current.value,
content: this.contentRef.current.value
}
})
}
saveArticle = (e) => {
e.preventDefault();
//Rellenar state con formulario
this.changeState();
//Hacer una peticion http por post para guardar el archivo
axios.post(this.url + 'save', this.state.article)
.then(res => {
if(res.data.article) {
this.setState({
article: res.data.article,
status: 'waiting'
});
//Subir la imagen
if(this.state.selectedFile !== null) {
//Sacar id del articulo guardado
var articleId = this.state.article._id;
//Crear form data y añadir fichero
const formData = new FormData();
formData.append(
'file0',
this.state.selectedFile,
this.state.selectedFile.name
);
//Peticion ajax
axios.post(this.url + 'upload-image/' + articleId, formData)
.then(res => {
if(res.data.article) {
this.setState({
article : res.data.article,
status : 'success'
});
}else {
this.setState({
article : res.data.article,
status : 'failed'
});
}
});
}else{
this.setState({
status: 'success'
});
}
}else {
this.setState({
status: 'failed'
});
}
});
}
fileChange = (event) => {
this.setState({
selectedFile : event.target.files[0]
});
}
render() {
if(this.state.status === 'success' || this.state.status ==='waiting') {
return <Navigate to = '/blog' />
}
return (
<div className='center'>
<section id='content'>
<h1 className='subheader'>Crear artículo</h1>
<form className='mid-form' onSubmit={this.saveArticle}>
<div className='form-group'>
<label htmlFor='title'>Titulo</label>
<input type='text' name="title" ref={this.titleRef} onChange={this.changeState}/>
</div>
<div className='form-group'>
<label htmlFor='content'>Contenido</label>
<textarea name="content" ref={this.contentRef} onChange={this.changeState}></textarea>
</div>
<div className='form-group'>
<label htmlFor='file0'>Imagen</label>
<input type='file' name="file0" onChange={this.fileChange}/>
</div>
<input type='submit' value='Guardar' className='btn btn-success'/>
</form>
</section>
<Sidebar />
</div>
)
}
}
export default CreateArticle;
Por lo que se ve segun hago un console.log en esta línea: var articleId = this.state.article._id; no recibe los datos de la id.
Este es el artículo de Sidebar.js
import React, { Component } from 'react'
import { Link, Navigate } from 'react-router-dom';
export class Sidebar extends Component {
searchRef = React.createRef();
state = {
search:'',
redirect: false
};
redirectToSearch = (e) => {
e.preventDefault();
this.setState({
search: this.searchRef.current.value,
redirect: true
});
}
render() {
if(this.state.redirect){
return (
<Navigate to={'/redirect/' + this.state.search}/>
)
}
return (
<aside id="sidebar">
{this.props.blog === 'true' &&
<div id="nav-blog" className="sidebar-item">
<h3>Puedes hacer esto</h3>
<Link to='/blog/crear' className="btn btn-success">Crear artículo</Link>
</div>
}
<div id="search" className="sidebar-item">
<h3>Buscador</h3>
<p>Encuentra el artículo que buscas</p>
<form onSubmit={this.redirectToSearch}>
<input type='text' name="search" ref={this.searchRef}/>
<input type='submit' name="submit" value="Buscar" className="btn"/>
</form>
</div>
</aside>
)
}
}
export default Sidebar;
Y el archivo de rutas Router.js
import React from 'react';
import { BrowserRouter, Navigate, Route, Routes, useParams} from 'react-router-dom';
import Error from '../Error/Error';
import Header from '../Header/Header';
import Footer from '../Footer/Footer';
import Home from '../Home/Home';
import Blog from '../Blog/Blog';
import Peliculas from '../Peliculas/Peliculas.js';
import Formulario from '../Formulario/Formulario';
import Search from '../Search/Search';
import Article from '../Article/Article';
import CreateArticle from '../CreateArticle/CreateArticle';
const Router = () => {
function GetParamsRedirect(){
let params = useParams();
return (
<Navigate to={'/blog/busqueda/'+params.search} />
)
};
return (
<BrowserRouter>
<Header/>
<Routes>
<Route exact path='/home' element = {<Home/>}/>
<Route exact path='/' element = {<Home/>}/>
<Route exact path='*' element = {<Error/>}/>
<Route exact path='/blog' element = {<Blog/>}/>
<Route exact path='/blog/articulo/:id' element = {<Article/>}/>
<Route exact path='/blog/crear' element = {<CreateArticle/>}/>
<Route exact path='/peliculas' element = {<Peliculas/>}/>
<Route exact path='/formulario' element = {<Formulario/>}/>
<Route exact path='/blog/busqueda/:search' element = {<Search/>}/>
<Route exact path="/redirect/:search" element={<GetParamsRedirect/>} />
</Routes>
<div className='clearfix'></div>
<Footer/>
</BrowserRouter>
)
}
export default Router;
Pueden ver el repositorio completo aquí: https://github.com/jbortweb/Master-React.git