Advanced Image Uploading with Vue and Laravel

What We’re Building

In this series, I’ll be showing you how to upload and store images using Vue and Laravel. For this video we’ll take a look at what the end app will look like and how it’ll function, and we’ll get started by setting up a new Laravel project.

Application Prep Work

We’ve got our blank Laravel application set up, so now we need to get started scaffolding out a database structure. Plus we’ll need to put a few routes in place to handle saving and displaying uploaded images. We also need to return a view back to the user, so let’s create something basic with TailwindCSS.

Let’s Add Vue

In order to have the interactivity that we want on the frontend, we’ll need to add Vue to our project. In this video we’ll go over installing Vue 3, initializing it in our application, compiling everything with Laravel Mix, and rendering a basic template on the main page.

Into The Pond

We have Vue up and running on our frontend, but now we need a way to browse and choose images for uploading. We could develop this ourselves, but using a reliable open-source package is even better! Filepond makes for a great option, plus it has an up-to-date Vue adapter that we can easily plug in to our application.

Saving Photo Data

Now that we’re able to drag and drop images into the frontend of our app, we need to actually process and save the images somewhere. Using the route that we created earlier, we’ll validate that the request contains an image file, save it to a relative path in our application, and grab some information from the file to populate a database row.

A Gallery View

What’s an image uploader without a gallery to showcase the pictures that we’ve added so far? Using our Vue component, we’re going to pull in an array of images from a previously-created route, and then display them in a grid using Tailwind and a simple v-for loop. After an image uploads successfully, it’ll be added to the gallery automatically.

Putting Restrictions In Place

We now have a fully-functional app that let’s us upload an image and showcase it in a nice little gallery. However, it might need some stricter validation if this were to go into a larger, production application. Let’s see if we can gate images based on size, and even display back custom messages from our backend.

That’s A Wrap

We’re all done! You’ve learned how to upload, process, and store images using Vue and Laravel. Where do you go from here? You could add more functionality to the frontend using one of the helpful Filepond plugin packages, or you can manipulate and transform images on the backend with something like Intervention.