1

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

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.