pazitron
2 months ago
682
14
Vue

File upload fails using Vue.js Laravel

Posted 2 months ago by pazitron

I keep getting "Call to a member function store() on null" when I use Vue to post a file and other data.

Vue.js component:

<template>
    <section>
        <form @submit.prevent="createJob" enctype="multipart/form-data">

		<input v-model="title" type="text" placeholder="title">
		<input type='file' @change="onFileSelected"/>
	
		<button type="submit" > Post </button>
	</form>
    </section>
</template>

<script>
	export default {
       
        data() {
            return {
                title: '',
                companyLogo: ''
            }
        },
methods: {
onFileSelected(e) {
                let image = e.target.files[0];
                let reader = new FileReader();
                reader.readAsDataURL(image);
                reader.onload = e => {
                    this.companyLogo = e.target.result;
                }
            },

	createJob() {
                axios.post('/manage/jobs', {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                    'title': this.title,
                    'company_logo': this.companyLogo
                })
                .then(response => {
                    console.log(response);
                })
                .catch(errors => {
                    console.log(errors.data);
                })
            }
}

}

My controller:

public function store(Request $request) { 

	$job = new Job;

        $job->title = request('title');
	$job->save();

	if(request()->has('company_logo')) {
            $job->update([
                'company_logo' => $request->file('company_logo')->store('images/company_logos', 'public')
            ]);
        }

        return 'Saved to DB';

}

I think it has something to do with the front end converting the image into base64 on upload and the backend (laravel) expecting the actual file, but not sure. My store() method returns null.

exception: "Error"
file: ".../app/Http/Controllers/ManageJobsController.php"
line: 91
message: "Call to a member function store() on null"


line 91 is 'company_logo' => $request->file('company_logo')->store('images/company_logos', 'public')

Please sign in or create an account to participate in this conversation.