Vue js Laravel Image Upload Example Tutorial From Scratch

Today, We want to share with you Vue js Laravel Image Upload Example Tutorial From Scratch.In this post we will show you Upload files with Vue.Js and Laravel, hear for Laravel Vue JS Image Upload Example with Demo we will give you demo and example for implement.In this post, we will learn about Image upload and validation using Laravel and VueJs with an example.

Vue js Laravel Image Upload Example Tutorial From Scratch

There are the Following The simple About Vue js Laravel Image Upload Example Tutorial From Scratch Full Information With Example and source code.

As I will cover this Post with live Working example to develop Vue js Laravel File Upload Tutorial, so the some major files and Directory structures for this example is following below.

  • Laravel – Vue JS File/Image Upload
  • setup Laravel
  • Laravel Routing
  • Create Laravel Controller
  • Create Vue JS Components
  • Install vue / npm
  • Run Project
Also Read :  Default SET Text Editor in Open FileZilla files

Vue js Laravel Image Upload

Step 1 : Install/setup Laravel

Install/setup Laravel

This is where I will make a simple HTML form and PHP server side source code for our web application. To make the forms simply all souce code copy and write it into your any text editor Like Notepad++, then CMD to run command it as Install/setup Larave.

composer create-project --prefer-dist laravel/laravel imgfileuploadexample

Step 2: Include Laravel Route

routes/web.php

Route::post('imgFrmSubmit','[email protected]');

Step 3: Make Laravel Controller

app/Http/Controllers/FileInpController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class FileInpController extends Controller
{
    public function imgFrmSubmit(Request $request)
    {
    	$fileName = time().'.'.$request->image->getClientOriginalExtension();
        $request->image->move(public_path('images'), $fileName);
    	return response()->json(['success'=>'You have successfully upload files/image.']);
    }
}

Step 4: Make NPM Settings

Install vue using CMD

php artisan preset vue

Install npm using CMD
npm install

Step 5: Simple Vue JS Components Source Code

resources/libss/js/app.js

require('./bootstrap');
window.Vue = require('vue');
Vue.component('imgupload-component', require('./components/ImguploadComponent.vue'));
const app = new Vue({
    el: '#app'
});

resources/libss/js/components/ImguploadComponent.vue
<template>
    <div class="pakainfo container">
        <div class="row pakainfo justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Vue js Laravel File Upload Tutorial - pakainfo.com</div>
                    <div class="card-body">
                        <div v-if="success != ''" class="alert alert-success" role="alert">
                          {{success}}
                        </div>
                        <form @submit="imgFrmSubmit" enctype="multipart/form-data">
                        <strong>Name:</strong>
                        <input type="text" class="form-control" v-model="name">
                        <strong>Files/Image:</strong>
                        <input type="file" class="form-control" v-on:change="onFilesUpdate">
                        <button class="btn btn-success">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        mounted() {
            console.log('vuejs Component mounted.')
        },
        data() {
            return {
              name: '',
              image: '',
              success: ''
            };
        },
        methods: {
            onFilesUpdate(e){
                console.log(e.target.files[0]);
                this.image = e.target.files[0];
            },
            imgFrmSubmit(e) {
                e.preventDefault();
                let mydataObj = this;
                const config = {
                    headers: { 'content-type': 'multipart/form-data' }
                }
                let livefrm = new FormData();
                livefrm.append('image', this.image);
                axios.post('/imgFrmSubmit', livefrm, config)
                .then(function (response) {
                    mydataObj.success = response.data.success;
                })
                .catch(function (error) {
                    mydataObj.output = error;
                });
            }
        }
    }
</script>

Step 6: Edit home.blade.php

resources/views/home.blade.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Upload files with Vue.Js and Laravel - pakainfo.com</title>
        <link href="{{libs('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="app">
            <imguploadc-omponent></imgupload-component>
        </div>
        <script src="{{libs('js/app.js')}}" ></script>
    </body>
</html>

Step : 7 Run VueJS Laravel File Upload Project

RUN >> update app.js

Also Read :  Multiple Image Upload using PHP into MYSQL database

Lastly, We have to run and save below simple command for update and run app.js file for Upload and manage files with Laravel and Vue:

npm run dev

Vue js Laravel Image Upload – Output

Vue js Laravel Image Upload Example Tutorial - Vue js Laravel Image Upload Example Tutorial From Scratch

Vue js Laravel Image Upload Example Tutorial

Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Vue js Laravel Image Upload Example Tutorial From Scratch.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always home.
If you enjoyed and liked this post, don’t forget to share.

Also Read :  Retrieving URL Query String in PHP

Leave a Reply

avatar
  Subscribe  
Notify of