axios sending null when uploading files to laravel api. Error Message: "Call to a member function store() on null"

Question

I have a form with file upload. I am using vue, axios and laravel 7 at the moment.

My form is as given below:

               <form v-on:submit.prevent="createTask" enctype="multipart/form-data" method="post">
                   <div class="form-group">
                        <label for="title">Title</label>
                            <input  type="text" class="form-control" name="title" id="title" v-model="task.title" />  
                            <label for="content">Content</label>
                            <textarea v-model="task.content" class="form-control" id="content" name="content" rows="4" ></textarea>
                              
                            <button type="submit" class="btn btn-sm btn-primary
               pull-right" style="margin:10px; padding:5 15 5 15; background-color:#4267b2">Save Task</button>       
                            <span>
                                <button @click="removeImage" class="btn btn-sm btn-outline-danger" style="margin:10px; padding:5 15 5 15; ">Remove File</button>
                            </span> 
                             <input type="file" id="image" name="image" />
                     </div>
                </form>

Axios submission

     createTask() {
console.log(document.getElementById('image').files[0])
              axios({
                    headers: { 'Content-Type': 'multipart/form-data' },
                    method: 'post',
                    url: '/api/tasks',
                    data: {
                        task_id : this.task.id,
                        title : this.task.title,
                        content : this.task.content,
                        created_by : this.$userId,
                        image : document.getElementById('image').files[0],
                    }
                })
                .then(res => {
                    // check if the request is successful
                    this.$emit("task-created");
                    this.task = {}
                })
                .catch(function (error){
                    console.log(error)
                });
           }

My controller code

public function store(Request $request)
{
    
    $task = $request->isMethod('put') ? Task::findOrFail($request->task_id) : New Task;
    $task->id = $request->input('task_id');
    $task->title = $request->input('title');
    $task->content = $request->input('content');
    $task->views = $request->input('views');
    $task->created_by = $request->input('created_by');
    $task->image = $request->image->store('images');
    
    //$task->image = $request->file('image')->store('images');
    
    if($task->save()) {
        return new TaskResource($task);
    }
}

The request payload

{task_id: "", title: "test", content: "test content", created_by: "1", image: {}}

We can see the image attribute is empty

The response error message

"Call to a member function store() on null"

The output of console.log(document.getElementById('image').files[0])

File {name: "test.jpg", lastModified: 1590920737890, lastModifiedDate: Sun May 31 2020 11:25:37 GMT+0100 (British Summer Time), webkitRelativePath: "", size: 436632, …}

lastModified: 1590920737890 lastModifiedDate: Sun May 31 2020 11:25:37 GMT+0100 (British Summer Time) {} name: "test.jpg" size: 436632 type: "image/jpeg" webkitRelativePath: "" proto: File

Answer 1

I solved this problem by changing the axios post request as follows. I used FormData to append and send data to server

 createTask() {
    let data = new FormData;
    data.append('image', document.getElementById('image').files[0]);
    data.append('task_id', this.task.id);
    data.append('title', this.task.title);
    data.append('content', this.task.content);
    data.append('created_by', this.$userId);

    axios({
        headers: { 'Content-Type': 'multipart/form-data' },
        method: 'post',
        url: '/api/tasks',
        data: data
     })
     .then(res => {
        // check if the request is successful
        this.$emit("task-created");
        this.image = '';
        this.task = {}
     })
     .catch(function (error){
        console.log(error)
     });
}