'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