From the course: Building Laravel and Vue.js 2 Web Apps

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Managing file uploads

Managing file uploads

From the course: Building Laravel and Vue.js 2 Web Apps

Start my 1-month free trial

Managing file uploads

“

- [Instructor] In this video, we'll set up an image uploader in the menu item component, and then save uploaded files using Laravel's Store method. Uploading files with AJAX can sometimes be complicated. So, I usually use a library called DropzoneJS, and there's also a Dropzone powered view component that we can install called Vue2 Dropzone. So first, in my host shell, I'm going to install that with NPMI for install, save dev, and it's Vue2-Dropzone. And while that's installing, I'm going to import it up here. So, we need to import Vue2, capital D, Dropzone, from that package in the Node Modules folder, Vue2-Dropzone. And we'll also want to load a style sheet that's in the Dist folder, so this is going to be vue2-dropzone/dist/vue2Dropzone.min.css. Next, in data, we'll need to set up some options, and we'll do that under a dropzoneOptions key. This will include the URL that we want to upload the image to, and we can set that up in a moment at api/add-image. And maybe we'll also add a…

Contents