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’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.
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.
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!
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.
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!