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