1

estoy creando una aplicación que esta conectada a un api (todo esto en local por ahora) el problema surge al momento de llenar el formulario que posee titulo descripción y ademas un input para una imagen. al momento de llenar el formulario y enviar la información via POST a la api, me envía un error de vuelta producido por la carga de la imagen a través de form. este error dice:

The submitted data was not a file. Check the encoding type on the form.

a continuación adjunto mi código para react

import React, { Fragment } from 'react';

export class CreatePost extends React.Component {

state = {
    newPost: [],
    categorias: []
}

componentDidMount() {
    this.getCategories();
}

getCategories = () => {
    console.log('categoriasss');
    let url = 'http://127.0.0.1:8000/api/';
    const secretKey = localStorage.getItem('key');

    fetch(url, {
        method: 'GET',
        headers: {
            Authorization: `token ${secretKey}`
        }
    })
    .then(resp => {
        console.log('recibe la info para categorias', resp.status);
        return resp.json();
    })
    .then(info => {
        console.log('recibe las categorias', info);
        this.setState({
            categorias: this.state.categorias.concat(info)
        })
    })
}

handleChange = (e) => {
    const { name, value } = e.target;
    let newObj = { [name]: value };
    console.log(newObj);
    const newData = {...this.state.newPost, ...newObj};
    this.setState({
        newPost: newData
    })
}

handleSubmit = (e) => {
    e.preventDefault();
    console.log('posted ', this.state.newPost);
    const secretKey = localStorage.getItem('key');
    let url = 'http://127.0.0.1:8000/api/';
    fetch(url, {
        method: 'POST',
        body: JSON.stringify(this.state.newPost),
        headers: {
            'Content-Type': 'multipart/form-data',
            'Accept': 'application/json',
            Authorization: `token ${secretKey}`
        }
    })
    .then(resp => {
        console.log('respuesta de la subida ', resp.status);
        return resp.text();
    })
}



render() {
    const categories = this.state.categorias.map((categoria, id) => {
        console.log('y? ', categoria.category);
    })
    return(
        <Fragment>
            <h1>Create page</h1>
            <form>
                <input name='title' placeholder='title' onChange={e => this.handleChange(e)}></input>
                <input name='author' placeholder='author' onChange={e => this.handleChange(e)}></input>
                <input name='description' placeholder='description' onChange={e => this.handleChange(e)}></input>
                <input name='content' placeholder='content' onChange={e => this.handleChange(e)}></input>
                <input name='category' placeholder='category' onChange={e => this.handleChange(e)}></input>
                <input name='photo' type="file" onChange={e => this.handleChange(e)}/>
                <button onClick={e => this.handleSubmit(e)}>Crea</button>
            </form>
        </Fragment>
    )
}
}

cuando analizo la network dentro de chrome dev:

Request URL: http://127.0.0.1:8000/api/
Request Method: POST
Status Code: 400 Bad Request
Remote Address: 127.0.0.1:8000
Referrer Policy: no-referrer-when-downgrade
2
  • 1
    Creo que debe ser por tu método handleChange, debes tener en cuenta que para los archivos no debes averiguar el atributo value, si no files que debe ser un arreglo, por lo que quizá te interese su primera posición. entonces sería algo como: event.target.files[0] Commented el 27 sept. 2019 a las 21:22
  • @German Alzate gracias!, esperemos que pueda salir :)
    – Richi
    Commented el 28 sept. 2019 a las 17:49

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.