'React Image upload with Axios - POST "URL" 404 (Not Found) - problem
Unfortunately I am not able to upload an image to React using Axios. I have here a normal form consisting of several input fields. One of them is an input field of type "file" and I want to upload an image to it. Through my research I quickly realized that many have this problem. All solutions I tried so far do not work. It is about my local development environment, for testing I installed it on my WebSpace, without success, same problem. (of course without the localhost baseUrL). This is my last attempt. Tried it also without async / await; as well as a direct inclusion of axios.
The error is always the same: POST http://localhost:3000/images 404 (Not Found)
for any help I would be very grateful!
Thank you very much for looking over it!
Here is my code:
my AddformData- Component:
import { useState } from 'react'
//import axios from 'axios'
import api from "./Api";
const AddformData = ({ onAdd }) => {
const [title, setTitle] = useState('');
const [info, setInfo] = useState('');
const [link, setLink] = useState('');
const [text, setText] = useState('');
const [image, setImage] = useState(null);
//Datum?
/*const submitForm = (e) => {
e.preventDefault();
const formData = new FormData();
//formData.append("name", name);
formData.append("file", image);
axios
.post('/images', formData)
.then((res) => {
console.log(res);
//alert("File Upload success");
})
.catch((err) => console.log("Error", err));
}; */
const onSubmit = async (e) => {
e.preventDefault();
//if(!title ){ alert('Title missing'); }
onAdd( {title, info, link, text, image} );
setTitle('');
setInfo('');
setLink('');
setText('');
setImage('');
const formData = new FormData();
//formData.append("name", name);
formData.append("file", image);
await api
.post('/images', formData)
.then((res) => {
console.log(res);
//alert("File Upload success");
})
.catch((err) => console.log("Error", err));
}
return (
<form className='add-form' onSubmit={ onSubmit }>
// just the fields where it is all about for now:
{/* older relict from trying making a own uploader-component
<FileUploader
onFileSelectSuccess={(file) => setImage(file)}
onFileSelectError={({ error }) => alert(error)}
/>
*/ }
<div className='form-control'>
<label>Add image</label>
<input
type='file'
acept='image/*'
onChange={(e) => setImage( [...e.target.files] )}
/>
</div>
<input style={{background: 'green'}} className='btn' type='submit' value='Speichern' />
</form>
)
}
export default AddformData
here is my Api-component:
import axios from "axios";
const api = axios.create({
baseURL: process.env.REACT_APP_BASE_URL || "http://localhost:3000/",
});
export default api
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
