Deric Cain has written a nice tutorial about creating multiple file uploads with Vue.js and Laravel.

enter image description here

I am working on an app and decided to take the plunge and use Vue. I have heard a lot of neat things about it and thought now is as good a time as any to learn a Javascript framework. I ran into a situation where I wanted to be able to upload multiple files and I couldn’t find any great documentation on how to do so. So… here we are.

Some house cleaning

I will assume that you have a very basic knowledge of Vue, so I won’t go into great detail about the fundamentals of Vue. Besides, I’m still learning it myself. At the time of this writing I am using:

Vue.js v.1.0.21

Laravel 5.2

Laravel Elixir

Laravel Elixir Vueify & Browserify

As for my file setup, I have a Blade template which has a custom Vue component. The Vue component is a single file where the template, SCSS and Javascript reside. And, I am using an app.js file as my main Vue instance and entry point.

CSRF Token

You should set this up before you start working with any forms in Vue. Otherwise, Laravel will throw errors saying there is a token mismatch. In my main Blade template that every page will use, I added a meta tag like so:

<meta name="_token" content="{{ csrf_token() }}"> This, of course, goes between the opening and closing <head> tags.

Keep this in your memory - we will use it in one minute.

Form create Blade template

Here is my Blade template where I am declaring my custom Vue component:

@extends('layouts.public')