The Good Tech Companies - How to Build a File Uploader Tool with Drag-and-Drop and Cloud Storage

Episode Date: September 13, 2025

This story was originally published on HackerNoon at: https://hackernoon.com/how-to-build-a-file-uploader-tool-with-drag-and-drop-and-cloud-storage. Learn how to build a modern file uploader tool with drag-and-drop, progress tracking, and cloud integration using file upload software. Check more stories related to programming at: https://hackernoon.com/c/programming. You can also check exclusive content about #filestack, #cloud-storage, #drag-and-drop, #file-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. Users today expect more from file uploader tools. They want drag-and-drop uploads, real-time progress tracking, and cloud storage integration. This guide will help you build a modern, user-friendly uploader tool.

This audio is presented by Hacker Noon, where anyone can learn anything about any technology. How to build a file uploader tool with drag and drop and cloud storage. By FileStack, by Shafali Janjid ever tried uploading files to a website, most of them feel like they're stuck in the past. Users today expect more. They want a file uploader tool that feels effortless, drag and drop from their desktop, instant previews, and progress bars that actually let them know what's going on. And it shouldn't matter if they're on desktop or mobile.

or uploading a small image or a massive video. The experience should just work. That's exactly what we're going to build in this guide. We will be creating a modern file uploader tool with drag and drop uploads, real-time progress tracking, and cloud storage integration, so we don't have toto everything from scratch. The best part?

We'll keep the code clean and simple with explanations so you can easily use it for your own projects. By the end of this guide, we'll have a user-friendly file uploader tool tool that meets today's expectations and makes file management feel smooth and intuitive. Key takeaways. Add drag and drop functionality to our uploader tool that feels natural and simple to use. Build a robust tool that handles multiple file types and sizes efficiently. Integrate cloud storage seamlessly without spending days on API docs. Show real-time progress so users always know

what's happening. Handle errors gracefully, providing clear feedback, understanding the challenge, Building a file upload feature sounds simple at first. We just have to let users pick a file and hit upload, right? In reality, it's a lot more complicated, especially if we want to build a modern file uploader tool that people actually enjoy using. The first big hurdle is the interface. Users don't just want to choose file button anymore. They expect drag and drop, real-time feedback, and a smooth experience whether they're on desktop

or mobile. Then comes the technical part. Regular file uploads using base basic HTML forms a reslo and confusing. Users don't see any progress or message, which leaves them starring at a blank screen while they're waiting for their files to upload. As a developer, you need to check if the file is allowed, make sure it's not too big, and handle different types of files, all while making it look easy and smooth for users. Storage adds another layer of complexity. Do you store files locally?

Set UP backups? Push them through a CDN so global users don't face delays. Rolling out out your own system is expensive and time consuming, but cloud storage AP as can feel overwhelming, too. On top of that, security is also a huge concern. File uploads are one of the most common attack vectors on the web. If you don't verify the files properly, you run the risk of facing malware and data leaks. Learn more about secure file handling on OWASP's guidelines, and finally, scalability. It's easy enough to handle uploads when you have 10 users. But what happens when hundreds are using your file uploader tool simultaneously. Now you also have to deal with internet speed, how much load your server can handle, and where to store all the files. Building the solution,

let's start building our file uploader tool step by step. We'll begin with awesome pull HTML structure and progressively enhance it into a smooth, user-friendly uploader that our users will actually enjoy. Step 1. Creating the basic structure first, let's set up our HTML, less than, Dock type HTML greater than less than HTML Lange equals N greater than less than head greater than less than meta charsit equals UTF8 greater than less than metaname equals viewport, content equals, width equals device width, initial scale equals 1.0 inches greater than less than title greater than modern file manager less than title greater than less than link rel equals style sheet HRE equals styles. CSS greater than less than head greater than less than body greater than less than div class equals container greater than less than h one greater than file management system less than h one greater than less than less than div it equals upload area greater than less than div it equals upload area class equals upload zone greater than less than div class equals upload

content greater than less than SVG class equals upload icon width equals 48 height equals 48 viewbox equals 02424 greater than less than path d equals m14 2 h6 a 2 h2 2 h20 a 2 000 0 020 v8 a 2 000 020 v8 l14 2m1 8 2 m18 20 h 2m18 20 h 1 3 h1 3 h12 v 4 h1 3 h1 3 v9 h 20 Greater than less than SVG greater than less than H3 greater than drop files here or click to browse less than H3 greater than less than P greater than support for images, documents, and videos up to 100 megabytes less than P greater than less than input type equals file. It equals file input. Multiple hidden greater than less than div greater than less than div greater than less than. upload progress greater than less than div it equals upload progress class equals progress container hidden greater than less than div class equals progress bar greater than less than div class equals progress fill greater than less than div greater than less than div greater than less than div greater than less than span class equals progress text greater than uploading

0% less than span greater than less than div greater than less than file list greater than div it equals file list class equals file grid greater than less than Files will be displayed here, greater than less than, div greater than less than script src equals, script JS, greater than less than, script greater than less than, HTML greater than here's what it will look like. STAP 2. Styling for a modern look now. Let's add some CSS to make our interface visually appealing. Check out the GitHub repository for the complete CSS. Here's what it looks like after adding the CSS. STAP 3. Implementing core JavaScript functionality in this step, we'll build the logic that powers the file uploader, including event handling, validation, progress tracking, and file management.

Step 3. 1. Class set up an initial configuration set up the File Manager class and reference the necessary DOM elements. Initialize an empty array to track uploaded files and call the method to add event listeners. Class File Manager, Constructor, reference DOM elements for file Upload this. Upload area equals document, get element by ID. Upload area, this. File input equals document, get element by ID, file input, this. Progress container equals document, get element by ID, upload progress, this.

Progress fill equals document, query selector, progress fill, this. Progress text equals document, query selector, progress text, this, file list equals document, Get element by ID. File list. This. Files equals store uploaded files this. Initialize event listeners. Set up event handlers. Step three. Two. Setting up event listeners attach handlers for clicking, dragging, and dropping, and file selection to make the uploader interactive. Initialize event listeners. Open file dialogue when user clicks the upload area this. Upload area. Add event listener. Click equals greater than this. File input. Click. handle file selection from the input this file input add event listener change e equals greater than

this handle files e target files drag over the area highlight the drop zone this upload area add event listener drag over e equals greater than e prevent default this upload area class list add drag over remove highlight when dragging leaves this upload area add event listener drag leave e equals greater than e prevent default this upload area class list remove drag over handle files dropped onto the area this upload area add event listener drop e equals greater than e prevent default this upload area class list remove drag over this handle files e data transfer Files. Step 3.3. Handling and validating files filter files based on size and only proceed with valid ones. Handle files, file list, const valid files equals array. From file list, filter, file equals

greater than, reject files larger than 100 MBIF file. Size greater than 100 asterisk 1024 asterisk 1024 alert back quote dollar file name is too large maximum size is 100 megabytes back quote return false return true if valid files length greater than zero this upload files files, valid files, warning important, validate files on both the client and server sides. Client side checks give instant feedback, but only server side validation protects our app from malicious uploads. Step 3.4. Uploading multiple files show the progress bar, upload each file one at a time, and hide the progress once done. Async upload files, files, this show progress for let i equals zero, i less than files.

i plus plus const file equals files i await this upload single file file i plus one files length this hide progress step three five uploading a single file with progress simulate file upload by incrementally updating the progress bar until complete async upload single file file current total return new promise resolve equals greater than let progress equals zero CONST interval equals set interval equals greater than progress plus equals math. Random. asterisk 15. If progress greater than equals 100, progress equals 100, clear interval, interval.

Add file to list once upload is done this. Add file to list, file. Resolve. Const overall progress equals current 1, total, asterisk 100 plus progress, total, this. Update progress, overall progress. Backquote uploading dollar, current of dollar, total, back quote, 200, step three. 6. Displaying uploaded files render the uploaded file in the UI with an icon, size, date, and a delete option.

Add file to list, file, consed file card equals document. Create element, div, file card, class name equals file card, const file icon equals this. Get file icon, file. Type, const file size equals this. Format file size, file, size, file card. Inner HTML equals backquote less than div class equals file info greater than less than div class equals file icon, greater than dollar, file icon, less than div greater than less than H4 greater than dollar, file size, dollar, new date. To locale date string, less than P greater than dollar, file size, new date. To locale date string, less than P greater than dollar, greater than less than div greater than less than div class equals file actions greater than button class equals BTN delete on click equals file manager delete file dollar file name greater than delete less than button greater than less than div greater than back quote this file list append child file card this files push file step three seven deleting files allow users to delete files updating the

file list and UI accordingly. Delete file, file name, this. Files equals this, files, filter, F equals greater than F. Name, equals equals file name, this. File list, inner HTML equals this, files, for reach, F equals greater than this. Add file to list, F, step three, eight. File icons based on type display appropriate icons based on file mime type for a better user experience. Get file icon mime type if mime type starts with image return framed picture if mime type starts with video return movie camera if mime type starts with audio return musical note if mime type includes PDF return page facing up if mime type includes word return memo if mime type includes Excel mime type includes spreadsheet return return return bar graph return file folder light bulb tip show file icons and formatted sizes to give users better feedback step three nine formatting file sizes convert file sizes into readable units like kb mb or gb format file size bytes if bytes equals equals equals zero return

0 bytes. Const K equals 1024. Const sizes equals, bytes, KB, mb, gb, const i equals math. Floor, math, log, bytes, math, log, k. Return parse float, bytes, math, pow, k, I, to fixed, 2, plus, plus sizes, step 3. 10. Showing and hiding upload progress control the visibility of the progress bar and update its value dynamically. Show progress, this. Progress Container. Class list. Remove, hidden. Hide progress. Set time out equals greater than this. Progress container. Class list. Add, hidden, this. Update progress. 0. Upload complete. 1,000. Update progress. Percent. Text, this. Progress fill. Style. With 5. Percent plus percent, this. Progress text. Text content equals text. Step 3. 11. Initializing the file manager, create an instance of the File Manager class to start the functionality. Start the

File Manager const file manager equals new file manager. Access the complete source code for this file uploader tool here. With this, our file uploader tool is fully interactive, and users can drag, drop, upload, and manage files effortlessly. REF. MDE N Web APIs. File Step 4. Integrating FileStack for Cloud Storage in this step, we will take our File Uploader tool to the next level by connecting it to the cloud. We can use tools like FileStack to directly pull from Cloud Storage, generate secure links, and make everything feel seamless for users. First, add the FileStack SDK to our HTML head. Less than ScriptSRC equals HTTP colon slash static. FileStack copy.com, FileStack

JS 4xx file stack min j s greater than less than script greater than then let's extend our file manager class to integrate cloud uploads show previews and manage file links for detailed documentation visit file stack's API reference step four one extending the file manager with file stack integration extend the basic file manager class to add cloud storage functionality using file stack class enhanced file manager extends file manager constructor super call the parent class constructor this client equals file stack in it your underscore API underscore key underscore here initialize file stack with your API key this picker equals null placeholder for the file stack picker instance important use your own API key in place of your underscore API

underscore key underscore here. You can get ITFROM the file stack dashboard. Warning file stack and other cloud services require API keys and setup. For production use, always protect your API keys and configure appropriate security settings. Step 4. 2. Initializing event listeners with F-I-L-E-S-T-A-C-K button initialize event listeners, super. Initialize event listeners, set up existing file selection and drag-drop listeners, add a new button for accessing cloud storage through files tack this. Add file stack button. Step 4.

3. Adding the file stack picker button add file stack button, CONST button equals document. Create element, button, button. Text content equals, browse cloud storage, button label button. Class name equals file stack BTN. Apply styling, open the file stack picker

when the button is click button. Onclick equals, e equals greater than e. Stop propagation. prevent triggering other events this open file stack add the button to the upload area this upload area append child button step four for configuring and opening the f i LESTA c picker open file stack const options equals except image asterisk video asterisk application PDF doc doc allowed file types max files 10 limit number of files selectable at once upload in back background. False. Upload immediately instead of in background on upload done.

Result equals greater than, add each uploaded file to the file list result. Files uploaded for each, file equals greater than this. Add cloud file to list, file. Open the file stack file picker with the above options this. Client picker options. Open step four, five. Displaying uploaded files from cloud storage add cloud file to list, file, const file card equals document. Create element, div, file card, class name equals file card cloud file, styling for cloud files file card. Inner HTML equals back quote less than div class equals file info greater than less than div class equals file icon greater than less than div greater than less than H4 greater than dollar file. File name less than H4 greater than less than P greater than dollar, this. Format file size, file size, cloud.

storage less than p greater than less than div greater than less than div class equals file actions greater than less than button class equals btn view on click equals window open dollar file URL underscore blank greater than view less than button greater than less than button class equals btn share on click equals navigator clipboard write text dollar file URL greater than copy link less than button greater than less than less than div greater than back quote this file list append child file card add to the file list step four six uploading files directly to file sync upload single file current total try upload file using file stack and track progress const file handle equals await this client upload file on progress evt equals greater than const progress equals evt loaded evt total asterisk 100 constant one total asterisk 100 plus progress total this update progress overall progress back quote uploading dollar current of dollar total back quote once uploaded add the file to the list view this add cloud file to list file name file name size file size URL file handle

URL catch error console error upload failed error alert back quote failed to upload dollar file name please try again back quote step four seven Initializing the enhanced file manager, instantiate the enhanced file manager to replace the default file manager functionality const file manager equals new enhanced file manager. Add this CSS to match our existing styles. File stack BTN. BTN view. BTN share margin top 1 rem. Padding.

0. 75 REM 1. 25 REM background. Linear gradient. 135 Deg. Number 0.000. 030C, number 764 Ba 2, color. Hashtag FFF, border, none, border radius, 8px, font size, 0, 95 REM, font weight, 600, cursor, pointer, transition, all zero. 3's ease, box shadow, 04px10pxRGBA, 0,000, 0,000, 0.15, file stack, b2, 5, 5, 5,000, 5, 5, 5, 5,

Hover, transform. Translate Y, minus 2PX, box shadow. 06 PX 14 PXRGBA, 0,000, 0,000. 2. File Stack BTN. Active, transform. Translate Y, 0, box shadow. O3PX7PXRGBA 0,000000. 15. This integration transforms our basic file manager into a powerful tool. It can handle files from multiple sources, local uploads, cloud storage services like Google Drive and Dropbox, or even URL imports. FileStack manages all the heavy lifting behind the scenes. That includes handling different storage providers, CDN distribution, and file transformations. Ref. FileStack documentation enhancing the implementation. Now, let's add some advanced features to our uploader tool that will make our file manager stand out. All time file previews users love instant feedback. For images, videos, and PDFs, we can generate previews right in the file list.

Generate preview, file, if file, mime type and in file, mime type, starts with image, return back quote less than IMGSRC equals dollar file. URL, alt equals preview, class equals file preview, on click equals, window. $1, file, URL, underscore blank, greater than backquote, else if, file. MIM type equals equals equals, application, PDF, return backquote less than Iframe SRC equals, dollar, file, URL, class equals, file preview, height equals 150, greater than less than, I frame greater than backquote. Return, add this to our CSS file. File preview, width, 100% max height 150 px object fit cover border radius 10px margin top 10px cursor pointer and update the

add cloud file to list function to show the previews like this add cloud file to list file const file card equals document create element div file card class name equals file card cloud file const preview equals this generate preview file less than add this file card inner html equals back quote less than div class equals file info greater than less than div class equals file icon greater than than less than div greater than less than h4 greater than dollar file file name less than h4 greater than than less than p greater than dollar this format file size file size cloud storage less than p rather than dollar preview less than add this greater than less than div greater than less than div class equals file actions greater than less than button class equals btn view onclick equals

window open dollar file URL underscore blank greater than view less than button greater than less than button class equals btn share unclick equals navigator clipboard write text dollar file link less than but and greater than less than div greater than backquote this file list append child file card light bulb tip instant previews improve user trust by letting them confirm uploads visually search and filtering make our file uploader tool even more user friendly by letting users search and filter files in real time implement search CONST. Search input equals document. Create element. Input. Search input. Type equals text. Search input. Placeholder equals search files. Search input. Class name equals search input, this. Upload area. Insert adjacent element. Before begin, search input. Search input. Add event listener, input, E, equals greater than this.

Filter files, E, target, value, filter files, query, const file cards equals this. File list, query selector all, file card, file cards, for each, card, equals greater than, const file name equals card. Query selector, H4, text content, to lowercase, card, style, display equals file name, includes, query, to lowercase, file name, includes, query, to lower case flex none in the enhanced file manager constructor call this implement search like this class enhanced file manager extends file manager constructor super this client equals file stack in it your underscore API underscore key this picker equals null this implement search less than add this and add this CSS search input width 100 percent padding zero 75 rem one 25 rem margin bottom 20 px border 2 px solid hash e 2e 8f 0 border radius 8 px font size 0 95 rem color hash 2 d 37 48 outline none transition all 0 3's ease box

O2PX6PXRGBA, 0-0-0-0.05. Search input. Focus, border color. Number 764 Ba2. Box shadow. Oh, oh, 3 PXRGBA. 118, 75, 162, 0.3. Search input. Placeholder, color. Hashe 0-EX0. Font style. Italic. Gear best practice. Always allow users to filter files easily when managing large lists. The beauty of using file stack is that many advanced features come built in. You get image transformations, document conversions, and even intelligent cropping out of the box. That means you don't need to build these complex features from scratch. And you won't have to maintain multiple third-party services either. Best practices and common pitfalls.

Here are some important lessons I've learned, sometimes the hard way, While building file uploader tools, validate files on both client and server. Client side validation is helpful because it gives users quick feedback, but real security comes from checking files on the server too. Never trust user input, even if it's coming from your own app's interface. Handle errors properly. Uploads don't always go smoothly. Files can fail, networks can drop, or servers can crash.

Always show clear error messages and give users a way to try again. Accessibility matters. Make sure your uploader works for everyone. Add ARIA labels for screen readers, allow keyboard navigation, and don't rely on colors alone to show messages. Use proper HTML structure and test with accessibility tools. Watch upload performance. Big files on slow networks can time out or fail. Using chunked uploads can help, and showing users how much time is left makes a big difference. Tools like FileStack handle this for you, but if you're building it yourself, Don't skip it. Plan for storage costs. Storing files can get expensive quickly. Clean up temporary files, compress them where possible, and set limits on file size based on your infrastructure's capacity. This helps you keep costs under control. Store files securely. Always store uploaded files outside your web route directory and serve them through signed URLs to prevent unauthorized access and improve security. Conclusion, building a modern file uploader tool doesn't have to be complicated. Start with a solid HTML foundation, enhance it step by step, and use tools like file stack for cloud storage.

The goal is a smooth, user-friendly uploader that people actually enjoy using. Focus on the experience first. Make drag and drop feel natural, previews load instantly, and progress bars meaningful. Keep the complex tech behind the scenes, hidden behind a clean and simple interface. Once that's working, you can add advanced features like file sharing, collaborative editing, or automated workflows. File management is something users interact with every day. Get this right, and you'll have happier users, better engagement, and far fewer support tickets. Resources for further learning. GitHub repository with complete code. MDN Web APIs, File, OWASP, Secure File Uplode, File Stack Documentation, About the Author. Shafali Janjid is a web developer, technical writer,

and content creator passionate about building intuitive developer tools and educational resources. She shares tutorials, code snippets, and practical tips on her blog, Shafali. Dev, helping developers create better web experiences with clean, efficient, and accessible code. Thank you for listening to this Hackernoon story, read by artificial intelligence. Visit hackernoon.com to read, write, learn, and publish.