Fetch API cannot load localhost:(port&path). URL scheme "localhost" is not supported

Question

I create react app that use API created with Spring Boot.

I would like to send a file to the server via the form in my react app (The server works good because I can upload file in Postman).

This is my form:

   <form onSubmit={e => uploadFile(e)} >
           <input type="file" name="img" onChange={changeHandler} />
           <button>Add!</button>
   </form>

uploadFile and changeHandler methods:

 const [selectedFile, setSelectedFile] = useState()

const uploadFile = () => {
        const formData = new FormData()
        formData.append('File', selectedFile)

        fetch(`localhost:8080/courses/1/comments/1/img`, {
            method: 'post',
            body: formData
        })
            .then(resp => resp.json())
            .then(data => console.log(data))
            .catch(err => console.log(err))
    }

    const changeHandler = (e) => {
        setSelectedFile(e.target.files[0])
    }

When I submit this form I get this:

Fetch API cannot load localhost:8080/courses/18/comments/1/img. URL scheme "localhost" is not supported.

How to solve this problem ?

I don't know, I had an error that got me here and I was just forgetting to connect with a prototcol, so this was a useful question for me. — JimLohse
– JimLohse, Commented Jan 12, 2023 at 19:37
@Monoxyd I also came here via searching for the same error, and it solved my problem. Why on earth would you want to delete such a question? What is the purpose of stackoverflow, if not for questions like this? — Keith Davidson
– Keith Davidson, Commented Mar 30, 2023 at 4:03

Kavindu Vindika · Accepted Answer · 2021-09-15 19:14:46Z

57

You have to specify the URL as follows.

http://localhost:8080/courses/1/comments/1/img

answered Sep 15, 2021 at 19:14

Kavindu Vindika

2,7972 gold badges16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Codemaker2015 · Accepted Answer · 2022-02-12 17:18:44Z

11

You might be forgot to specify the http protocol in the URL.

So, replace localhost:8080/courses/1/comments/1/img in the fetch method with http://localhost:8080/courses/1/comments/1/img

fetch(`http://localhost:8080/courses/1/comments/1/img`, {
    method: 'post',
    body: formData
})

answered Feb 12, 2022 at 17:18

Codemaker2015

16k9 gold badges118 silver badges93 bronze badges

Collectives™ on Stack Overflow

Fetch API cannot load localhost:(port&path). URL scheme "localhost" is not supported

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related