Guide to Uploading Files with VueJS and Axios

About this series

A few weeks ago, I wrote a quick tutorial about Uploading Files With VueJS and Axios. The positive response inspired me to expand on the topic with additional tutorials.

In this course, we'll explore file uploads from the basics to advanced features. We'll start with simple file uploads, then move on to file previews, progress indicators, and finally implement drag-and-drop functionality.

While file uploads can be challenging to implement, breaking them down into manageable components makes the process much more approachable. These tutorials aim to provide clear, practical solutions for common file upload scenarios.

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 learning more, check out our book where we 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.

What you'll learn

• Upload single files through AJAX
• Upload multiple files through AJAX
• Add a progress bar to show upload progress
• Preview image uploads
• Implement drag and drop file uploads