One of the biggest pain points I see between using the Fetch API and Axios is the way Fetch is configured out of the box. I love the power, but Axios comes with some default config and a way to make it easy to set global settings. I want to see if I can abstract some of the settings that are generally used across all API requests and make them reusable with the Fetch API. I’m going to structure this reusability similar to building an API wrapper with axios. The main difference (besides using Fetch instead of Axios), is we are going to implement these methods using the new Vue 3 Composition API!
Featured SubjectsSee all →
Free CoursesView all courses →
We’ve talked about file uploads with Axios a ton of different ways. Since we are just comparing the Fetch API with Axios, I won’t do as many examples. However, we will touch on the differences between the Fetch API and Axios when uploading files. Once again, if you want to see exactly how this component works, check out our GitHub repo.
In the last tutorial, we covered the differences between the Fetch API and Axios when sending a GET request. Let’s take it up another notch and send POST, PUT, and PATCH requests with the Fetch API and compare how these methods operate compared to an Axios request.
If you want to jump ahead and see the answer, check out the Github repo for this component here. You can see the differences right away. If you want to see how this works, keep reading!
There are so many use cases for allowing a user to upload a CSV file into your application. However, there are equally as many problems with CSV file uploads such as empty columns, bad data, etc. These issues are why this is my favorite tutorial of the Uploading Files with VueJS and Axios series. This tutorial solves this problem using a fantastic open source library called Papaparse.
With Papaparse, we can actually allow the user to preview their CSV upload and make changes to the data BEFORE submitting the file to the server. Papaparse even gracefully handles empty lines and headers. While there is so much that Papaparse can do, we are going to touch on a few scenarios. I’d highly recommend checking out their documentation to see the library’s full feature set.
I believe it’s good UX to allow the user to preview their media files before uploading them to a server. This is for both audio and video files. Coming from the last tutorial where we previewed an MP3 file, you will notice a lot of the code here is very similar. Previewing a selected video file in an HTML5 video element is VERY similar to previewing a selected audio file in an HTML5 audio element. Both make use of the modern elements.