Image upload from React to NodeJS, port connexion refused

Hello Dear Community :)

I'm trying to code an image upload on my website, from React to Backend in NodeJS.

I have this error with this port connexion.

This path http://localhost:5000/api/plants with post method works fine in PostMan (with uploading picture). The problem occurs when I want to upload to the backend server.

enter image description here

Here is the problem logged in the console

xhr.js:177 POST http://localhost:5000/api/plants net::ERR_CONNECTION_REFUSED

Here is my code :

import React, { Component, useState } from "react";
import axios from 'axios';




class UploadImg extends Component {

    state = {
        image: null,
    }

    handleChange = event => {

        this.setState({
            image: event.target.files[0],
            loaded: 0,
        })
    }

    handleFileUpload = event => {
        console.log('the new file upload is :', event.target.files[0]);
    }


    onClickHandler = (event) => {
        const data = new FormData()
        data.append('file', this.state.image)

        axios.post('http://localhost:5000/api/plants', data)
        .then(res => {
            console.log(res)
        })
        .catch((error) => {
            console.log(error)
        })

        event.preventDefault();
    }

    render() {
        return (
            <div>
                <h2>New Thing</h2>
                <form onSubmit={this.handleSubmit}>
                    <input type="file" onChange={this.handleFileUpload} />
                    <button onClick={this.onClickHandler} type="submit">Upload</button>
                </form>
            </div>
        )
    }
}


export default UploadImg


Read more here: https://stackoverflow.com/questions/67930714/image-upload-from-react-to-nodejs-port-connexion-refused

Content Attribution

This content was originally published by Mesavarman at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: