KK's Drive

File Index Browse

A modern, custom-built web interface designed for browsing Dropbox files. It offers a seamless user experience for navigating folders, downloading items, and uploading new content. The application intelligently maintains a secure connection to your Dropbox account, ensuring continuous and reliable access. It acts as a more powerful and user-friendly alternative to the standard file browser.

Objectives

It’s designed to simplify Dropbox file sharing and management. With an intuitive interface, it streamlines real-time syncing, uploading, viewing, downloading and shared uploads. This makes accessing, sharing, and organizing content seamless for users.

Enhanced Functionality: Overcomes Dropbox API limitations by providing server-side folder zipping for easy download of entire directories

Seamless Authentication: The backend automatically manages and refreshes Dropbox access tokens, providing uninterrupted service without manual re-authentication

Decoupled & Modern Architecture: Separating the frontend (Cloudflare) and backend (Node.js) allows for independent scaling, development, and deployment

A Note on Download Methods:

Individual File Selection: You can select and download multiple files from any location. This is fast for grabbing specific items, but it will not recreate the folder structure on your computer.
Recommended for Structure: To preserve the complete folder and sub-folder hierarchy, it is best to navigate to the parent folder you wish to download and use the "Download as ZIP" feature.

Key Features

Comprehensive File Management: Provides a fluid browsing experience with toggleable list and grid views. Users can effortlessly navigate deep into nested folder structures, while an intuitive breadcrumb trail makes it easy to move between parent and child directories

Streamlined Shared Uploads: Features a dedicated user interface for uploading files directly to a pre-configured shared folder in Dropbox, simplifying the process of adding new content without needing to navigate the native Dropbox UI

Intelligent Folder Uploads with Structure Preservation: Bypasses the lack of a native folder upload API by intelligently recreating the directory tree on upload. When users provide files, the backend organizes them into the correct folder structure within Dropbox, ensuring that content is always neatly arranged in the intended destination

Dynamic Folder Zipping & Download: Overcomes a key Dropbox API limitation by dynamically zipping entire folders on the server. This allows users to download a complete directory as a single .zip file, perfectly preserving the original nested folder and file structure.

Technologies Used

Node.js

Backend runtime environment

Express.js

Web application framework

File System API

Native file operations

HTML5

Modern web interface

CSS3

Responsive styling

JavaScript

Client-side interactivity

API

Dropbox API (OAuth 2.0)

View Source Code

Live Demo