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
handleChange
, debes tener en cuenta que para los archivos no debes averiguar el atributovalue
, si nofiles
que debe ser un arreglo, por lo que quizá te interese su primera posición. entonces sería algo como:event.target.files[0]