Laravel 8 Vue JS File Upload Tutorial With Example

In this tutorial you will learn about the Laravel 8 Vue JS File Upload Tutorial With Example and its application with practical example.

In this Laravel 8 Vue JS File Upload Tutorial With Example, we will learn how to upload a file in Laravel 8 Vue JS application with example. I’ll guide you through step by step how to upload files with Vue js using Axios post request In Laravel 8 Vue JS application. In this tutorial, we will be creating a simple form to send form data (files, images, input fields etc) with Vue js using Axios to send POST request in laravel.

Laravel 8 Vue JS File Upload Tutorial With Example

  • Step 1: Install Laravel 8
  • Step 2: Setup Database Credentials
  • Step 3: Create Model And Migration
  • Step 4: NPM Configuration
  • Step 5: Add Routes
  • Step 6: Create Controller By Command
  • Step 7: Create Vue Component
  • Step 8: Register Vue App
  • Step 9: Run Development Server

Step 1: Install Laravel 8

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

Make sure you have composer installed.

Step 2: Setup Database Credentials

Now, lets create a MySQL database and connect it with laravel 8 application. After creating database we need to set database credential in application’s .env file.

Step 3: Create Model And Migration

Now, we have to define table schema for photo table. Open terminal and let’s run the following command to generate a Photo model along with a migration file to create photo table in our database.

Once this command is executed you will find a migration file created under “database/migrations”. Lets open migration file created and put following code in it –

Next, migrate the table using the below command:

After, the migration executed successfully the photo table will be created in database.

Step 4: NPM Configuration

Now, you need to setup Vue Js In Laravel 8 and install Vue Js dependencies using NPM. So execute the following command on command prompt.

Use below command to Install all Vue Js dependencies:

Step 5: Add Routes

Now, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Step 6: Create Laravel Controller Using Artisan Command

Next, we have to create a controller to handle file upload operation. Lets Create a controller named FileUploadController using command given below –

Once the above command executed, it will create a controller file FileUploadController.php in app/Http/Controllers directory. Open the FileUploadController.php file and put the following code in it.

app/Http/Controllers/FileUploadController.php

Step 7: Create Vue Component In Laravel Application

Now we will create a Vue Component, go to resources/assets/js/components folder and create a filed called FileUpload.vue. Put the following code into your FileUpload.vue components file:

Now open resources/assets/js/app.js and include the FileUpload.vue component in it.

resources/assets/js/app.js

Step 8: Register Vue App

Now, we will create a blade view file to define Vue app. Go to resources/views folder and make a file named upload.blade.php. Then put the following code into upload.blade.php as following:

Step 9: Start Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

In this tutorial we have learn about the Laravel 8 Vue JS File Upload Tutorial With Example and its application with practical example. I hope you will like this tutorial.