Laravel Vue JS File Upload Using vue-dropzone Example

Laravel Vue JS File Upload Using vue-dropzone Example

In this post we will give you information about Laravel Vue JS File Upload Using vue-dropzone Example. Hear we will give you detail about Laravel Vue JS File Upload Using vue-dropzone ExampleAnd how to use it also give you demo for it if it is necessary.

When we require to add drag and drop file upload then we always choose dropzone js for that because it is awesome. So in this tutorial, i would like to share with you vue js file upload using vue-dropzone component in laravel. basically, you can also use dropzone js in your vue js script.

Here, i create example step by step of vue.js dropzone image or file uploading. We will go from scratch so, first we will download laravel 5.6 and then we will initialize vue js then install vue-dropzone package. After that we will create one post route and one controller with one method. We will create POST method on controller and write code for save image and also you can write more details on it.

So, Just follow below few step and then get full example of image or file upload using vue-dropzone component.

Preview:

Step 1 : Install Laravel 5.6 Project

In first step, we will install Laravel 5.6 application using bellow command, So open your terminal OR command prompt and run bellow command:

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

Step 2: Create Route

In second step, we will create one post route and write image or file upload code. So, let’s add new route on that file.

routes/web.php

Route::post('formSubmit','ImageController@formSubmit');

Also see:Dynamic Form Validation in VueJs with PHP Laravel 5.6

Step 3: Create Controller

in this step, now we have create ImageController with formSubmit methods, in this method we will write code of store image or file on server. So let’s create controller:

app/Http/Controllers/ImageController.php

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;

class ImageController extends Controller

{

/**

* success response method.

*

* @return IlluminateHttpResponse

*/

public function formSubmit(Request $request)

{

$imageName = time().'.'.$request->file->getClientOriginalExtension();

$request->file->move(public_path('images'), $imageName);

return response()->json(['success'=>'You have successfully upload file.']);

}

}


Step 4: NPM Configuration

Here, we have to first add setup of vue js and then install npm and also vue-dropzone package, so let’s run bellow command in your project.

Install vue:

php artisan preset vue

Install npm:

npm install

Install vue-dropzone:

npm install vue2-dropzone

Step 5: Write on app.js and Components

In this step, we will write code on app.js and then we will create vue js components, So let’s create both file and put bellow code:

resources/assets/js/app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({

el: '#app'

});

resources/assets/js/components/ExampleComponent.vue

<template>

<div >

<div >

<div >

<div >

<div >Example Component</div>

<div >

I'm an example component.

<vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions"></vue-dropzone>

</div>

</div>

</div>

</div>

</div>

</template>

<script>

import vue2Dropzone from 'vue2-dropzone'

import 'vue2-dropzone/dist/vue2Dropzone.min.css'

export default {

components: {

vueDropzone: vue2Dropzone

},

data: function () {

return {

dropzoneOptions: {

url: '/formSubmit',

headers: {

"X-CSRF-TOKEN": document.head.querySelector("[name=csrf-token]").content

}

}

}

},

mounted() {

console.log('Component mounted.')

}

}

</script>

Step 6: Update welcome.blade.php

At last step, we will update our welcome.blade.php file. in this file we will use app.js file and use it, so let’s update.

resources/views/welcome.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>Laravel Vue JS File Upload Using vue-dropzone Example - ItSolutionStuff.com</title>

<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">

</head>

<body>

<div id="app">

<example-component></example-component>

</div>

<script src="{{asset('js/app.js')}}" ></script>

</body>

</html>

Now you have to run below command for update app.js file:

Also see:Laravel Vue JS Image Upload Example with Demo

npm run dev

Now you can check it full example.

I hope it can help you…

Hope this code and post will helped you for implement Laravel Vue JS File Upload Using vue-dropzone Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  63  =  64

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US