React & NodeJS shows the URI is malformed error

Question

I recently moved my workspace to Linux centOS from Windows10. When I run this code in Windows 10. It works and I am able to upload file to the server. But when I change the environment to CentOS. It still show the output but it does not send file to the server and show error "URI is malformed"

here are my codes

import React from 'react';
import axios from 'axios';
import Swal from 'sweetalert2';
import withReactContent from 'sweetalert2-react-content';
const MySwal = withReactContent(Swal);
const BASE_URL = 'http://localhost:5000';
class UploadPDF extends React.Component {

constructor(props) 
{
    super(props);
    this.state = 
    {          
         images: [],
         imageUrls: [],
         message: ''
    }
}

selectImages = (event) => 
{
    let images = []
    for (var i = 0; i < event.target.files.length; i++) 
    {
        images[i] = event.target.files.item(i);
    }
    images = images.filter(image => image.name.match(/\.(pdf)$/))
    let message = `${images.length} valid File(s) selected`
    this.setState({ images, message })
}

uploadImages = () => 
{
  MySwal.fire('File Uploaded','The File Is Uploaded!','success'
  );
    const uploaders = this.state.images.map(image => 
        {
            const data = new FormData();
            data.append("image", image, image.name);
            // Make an AJAX upload request using Axios
            return axios.post(BASE_URL + 'upload', data)
                .then(response => 
                    {
                        this.setState(
                            {
                                imageUrls: [ response.data.imageUrl, ...this.state.imageUrls ]
                            });
                    })
        });

    axios.all(uploaders).then(() => 
    {
        console.log('done');
    }).catch(err => alert(err.message));
}


render() {
    console.log("Header - Rendered");
    return(
        <div className="container">
            <div className="py-5 text-center">
                <div className="jumbotron">
                    <div className="container">
                        <h1>Upload File</h1>
                        <hr/>
                        <p className="lead">Only PDF</p>                        
                        <input className="form-control " type="file" onChange={this.selectImages} multiple />
                        <p className="text-info">{this.state.message}</p>           
                        <button className="btn btn-primary" value="Submit" onClick={this.uploadImages}>Submit</button>                                   
                    </div>                            
                </div>                         
            </div>     
        </div>
    );
}
}
export default UploadPDF;

This is the code I am stuck and dunno what to do. any links or suggestion ?

Answer 1

It's hard to tell exactly what's going on but my guess is you're combining the string in BASE_URL with "upload" so you wind up trying to post to http://localhost:5000upload rather than http://localhost:5000/upload .

Try adding a trailing slash on BASE_URL and see if that fixes your problem.

This said, I'm not sure why the OS would make a difference.