Your Guide To Uploading Files with VueJS and Axios
Learn all of the ins and outs of uploading files with VueJS and Axios
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 course 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.
- - Upload a single file through AJAX
- - Upload multiple files through AJAX
- - Add a progress bar to show upload progress
- - Preview image uploads
- - Drag and drop file uploads