I recently published a tutorial showing how to upload files with HTML [https://austingil.com/uploading-files-with-html/]. That's great, but it's a bit limited to using the native browser form behavior, which causes the page to refresh. In this tutorial, I want to show you how to do the same thing with JavaScript [https://austingil.com/category/javascript/]

freeCodeCamp is a nonprofit organization offering free online coding courses and programming tutorials, covering topics such as web development, data science, and machine learning. Learners can gain practical coding skills, build real-world projects, and earn certifications to advance their careers in tech.

freeCodeCamp

How to Upload Files with JavaScript is a bit limited to using the native browser form behavior, which causes the page to refresh. In this tutorial, I want to show you how to do the same thing with JavaScript to avoid the page refresh. That way, you can have the same functionality, but with better user experience.

How to Upload Files with JavaScript

To add to this article, you may want to choose to use XHR instead of fetch for upload functionality that doesn’t navigate away form the page. The reason is that this also allows you to add a progress indicator.
whatwg has <a href="https://github.com/whatwg/fetch/pull/425" target="_blank" rel="noopener nofollow">been looking into</a> a ReadableStream implementation for Fetch for the past 6 years. This would also allow you to add a progress indicator, but since it’s taken so long, I wouldn’t hold my breath.

great article Austin! I’ve always used Axios, thanks for sharing how to do it the vanilla way