In this lesson, let's see how we can upload files using Vue.js. It's a pretty complex topic because it isn't just adding a new field. Let's see how we can do that.
Vue: File Upload Input
First, let's add a new file upload field and call it thumbnail
.
resources/js/components/Posts/Create.vue:
<template> <form @submit.prevent="storePost(post)"> // ... <!-- Thumbnail --> <div class="mt-4"> <label for="thumbnail" class="block font-medium text-sm text-gray-700"> Thumbnail </label> <input @change="post.thumbnail = $event.target.files[0]" type="file" id="thumbnail" /> <div class="text-red-600 mt-1"> <div v-for="message in validationErrors?.thumbnail"> {{ message }} </div> </div> </div> <!-- Buttons --> <div class="mt-4"> <button :disabled="isLoading" class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm uppercase text-white disabled:opacity-75 disabled:cursor-not-allowed"> <span v-show="isLoading" class="inline-block animate-spin w-4 h-4 mr-2 border-t-2 border-t-white border-r-2 border-r-white border-b-2 border-b-white border-l-2 border-l-blue-600 rounded-full"></span> <span v-if="isLoading">Processing...</span> <span v-else>Save</span> </button> </div> </form></template> <script setup>// ...const post = reactive({ title: '', content: '', category_id: '', thumbnail: '' })// ...</script>
The problem with the file input is that we cannot use v-model="thumbnail"
. As you can see instead of v-model
we used @change="post.thumbnail = $event.target.files[0]"
. So what does it mean?
We listen for a change on the input file and then manually...