A few weeks ago, I wrote a quick tutorial about Uploading Files With VueJS and Axios – Server Side Up. There seemed to be a good response so I went ahead and wrote a few more tutorials building off of the basics.

In this short series we will run through the basics of uploading files, to providing previews for uploaded files, to adding a progress bar for file upload status and finishing with a component that allows you to drag and drop files to upload.

The reason I wrote these tutorials is I really dislike managing file uploads so I thought if I can go through and really grasp the concepts, it’d make the pain of coding them every time a lot less. Turns out it did. Not that I enjoy dealing with files, but breaking the process down into smaller chunks makes it a whole lot more bearable.

I’m also doing a lot of work developing a book on API Driven Application development using VueJS and Laravel PHP. The idea behind API Driven Application Development works with having a single page application in javascript submit API requests to the server. These tutorials go through the process on the javascript side and how to add a lot of features needed. If you are interested in the book, feel free to sign up here to stay in the loop on it’s progress: Server Side Up General List. We will go into way more detail on sending requests (including file requests), and processing them on the server side.

I’ll of course add any other tutorials that are requested, but this should over the basics. Listed below are the tutorials in the order I’d recommend reading. They go from least complex, to adding features, to being most complex.


Uploading Files With VueJS and Axios

In this tutorial we cover the basics of file uploading with Vue.js and GitHub – axios/axios: Promise based HTTP client for the browser and node.js. We start with a simple single file upload, expand to allowing users to select multiple files at once, and then finish with allowing users to select multiple files and remove files before they submit to the server. The removing of files before server submission is kind of a trick, but hopefully this will help walk through the process.

Preview File Uploads with Axios and VueJS

This tutorial adds a cool feature that allows the user to preview the file (if it’s an image) before they upload it to the server. It’s a simple UX tweak but adds some cool tricks. This builds off of our last tutorials and gives an example with single files and multiple file previews. Like anything with multiple files, there’s a few tricks involved so hopefully this helps!

File Upload Progress Indicator with Axios and VueJS

Another neat feature that we can add is the ability to add a progress bar for uploading files. This alerts the user the progress of the upload. It’s pretty simple, but kind of nice for UX.

Drag and Drop File Uploads with VueJS and Axios

This is the capstone article where not only do we use all of the features from previous articles, we also add in drag in drop functionality. We build off of Osvaldas Valutis and his guest post on CSS tricks: Drag and Drop File Uploading | CSS-Tricks. The drag and drop file uploader is adapted to work with VueJS and Axios and provides a slick user experience with a lot of capability for expansion.

Of course if you have any questions or need a hand, feel free to leave a comment below and I will get back to you as soon as I can!