Can not upload file to API with JavaScript, but using Postman Works.

I need my users to upload a file to our API, but whenever I run the JavaScript code I get the following error.

Call to a member function getRealPath() on null

The route is working since I am able to get the desired response with postman. Here is my JavaScript

const submitFile = () => {
        let inputFile = document.getElementById('browse-file').files[0]
        let url = `https://google.com/test`
        var data = new FormData()

        data.append('file', inputFile)
        
        axios.post(url, data)
            .then(res => {
                console.log(res)
            }).catch(err => console.log(err))
    }

Here is the line in my PHP code that is failing.

$path = file_get_contents($request->file->path());

MohamedTammam

4 years ago

Level 51

Firstly, adding the proper headers for uploading a file.

const submitFile = () => {
        let inputFile = document.getElementById('browse-file').files[0]
        let url = `https://google.com/test`
        var data = new FormData()

        data.append('file', inputFile)
        
        axios.post(url, data, {headers: {'Content-Type': 'multipart/form-data'}})
            .then(res => {
                console.log(res)
            }).catch(err => console.log(err))
    }

Secondly, it's better to validate that the input is a file in the back-end

$request->validate([
	'file' => 'required|file'
]);

$path = file_get_contents($request->file->path());

BabyJebus

4 years ago

Level 1

@MohamedTammam This is how my request is formatted. I just removed the header code from my original post.

MohamedTammam

4 years ago

Level 51

@BabyJebus What's the value of

$request->validate([
	'file' => 'required|file'
]);
dd($request->file('file'));
$path = file_get_contents($request->file->path());

BabyJebus

4 years ago

Level 1

@MohamedTammam Null

MohamedTammam

4 years ago

Level 51

@BabyJebus Even after the validation?

Please or to participate in this conversation.