The Good Tech Companies - A Simple Way to Build a Progress Bar for Your Website’s Image Uploader Using Filestack

Episode Date: July 22, 2025

This story was originally published on HackerNoon at: https://hackernoon.com/a-simple-way-to-build-a-progress-bar-for-your-websites-image-uploader-using-filestack. Let��s walk through how to build one manually, and then I’ll show you why we ensured you would never have to. Check more stories related to programming at: https://hackernoon.com/c/programming. You can also check exclusive content about #filestack, #fileupload, #progress-bar, #iamge-uploader, #javascript, #html, #css, #good-company, and more. This story was written by: @filestack. Learn more about this writer by checking @filestack's about page, and for more stories, please visit hackernoon.com. Let’s walk through how to build one manually, and then I’ll show you why we ensured you would never have to.

This audio is presented by Hacker Noon, where anyone can learn anything about any technology. A simple way to build a progress bar for your website's image uploader using FileStack. By FileStack. If you're building any kind of image uploader for a website, you'll quickly realize that a basic file input isn't enough. The moment a user tries to upload a large file, the experience breaks. They click, upload, the browser seems to hang, and they have no idea if it's working or broken. This is the exact moment you realize you need a progress bar. The thing is, building one from scratch is a

classic developer trap. It seems straightforward, but you soon find yourself deep in the weeds of objects, event listeners, and DOM manipulation. It's a ton of boilerplate for a feature that should just be standard. Let's walk through how to build one manually, and then I'll show you why Weinshirt you would never have to. Key takeaways A progress bar is essential for a good user experience in any modern file uploader. Building a custom progress bar from scratch requires boilerplate JavaScript using its event. The manual approach forces you to manage DOM updates and calculations yourself. A front-end-only progress bar is useless without a server-side endpoint to receive the file, adding more complexity. The file stack picker automatically includes a reliable,

professionally designed progress bar, with no extra code required. The manual method with vanilla JavaScript. If you were to build this feature yourself, you'd have to use the browser's XHR API. It lets you make HTTP requests and, crucially for us, monitor the progress of an upload. Here's what that implementation looks like, piece by piece.1. The HTML first, you need a basic file input and a container for the progress bar point 2. The CSS next, here are some simple styles to make our progress bar look like it's actually progressing point 3. The JavaScript this is where the tedious work comes in. We have to select the elements, listen for a file, create an XHR request, attach an event listener to the event, and manually update the DOM. This works, but look at the ceremony.

You're responsible for every step, and we haven't even touched proper error handling, timeouts, or the fact that this code is useless without a corresponding back-end to receive the file. This is exactly the kind of repetitive work we believe you shouldn't be doing. Note, this code shows the actual front-end logic for a manual upload. Because EIT requires a server to receive the file, running this HTML directly will cause a CORS policy error in your browser's console. This error is a great example of the hidden backend complexity that this approach requires. The simple way with file stack. Now, let's look at the alternative.

When we designed the file stack picker, we built all of that functionality directly into it. You don't need to create an OR write a progress handler. The progress bar is built in and works automatically. It's designed to give users clear feedback during and after the upload. Here is the complete code to get a powerful image uploader for your website, complete with a progress bar, using file stack. That's it. That's the entire implementation. You get a beautiful, full-featured uploader that shows detailed progress for each file, and you wrote about five lines of meaningful code to get it.

We handle the rest. Wrapping up. The manual JavaScript approach gets the job done, but it's a perfect illustration of a developer time sync. You're forced to write boilerplate code to manage XHR events and manipulate the DOM, and that's just for the front end. You still have to build and maintain a server-side endpoint to actually receive the file. All this for a progress bar. When we built the file stack picker, we considered a progress bar to be table stakes, not an optional feature you should have to implement yourself. It's a fundamental requirement for a good user experience. That's why it's included by default, along with robust error handling, multi-part uploads for large files, and retry logic. Your time is your most valuable resource.

Spending it to reimplement solved problems is a losing game. The goal is to focus on your application's core logic, not the plumbing. We handled the plumbing so you can get back to work on what matters. This article was originally published on the Filestack blog. Thank you for listening to this Hacker Noon story, read by Artificial Intelligence. Visit hackernoon.com to read, write, learn and publish.