The Disbox web client.

Overview

Disbox Web Client

Try Disbox here: https://disboxapp.github.io/web

This is the web client for the Disbox project.

Disbox is a cloud storage service that stores your files on discord. It bypasses the file size limit by splitting files into chunks, and wraps everything in a virtual file system.

Using Discord allows for easy and secure logins, fast uploads and downloads, multiple drives, and easy access management.

Features

Feature Support UI JavaScript API
Login using Webhook URL Setup page new DisboxFileManager(webhookUrl)
Upload files "Upload file" button uploadFile(path, file, onProgress)
Create folders "New folder" button createDirectory(path)
Download files "Download" column downloadFile(path, fileSystemWritable, onProgress)
Delete files/empty folders "Delete" column deleteFile(path, onProgress)
Rename Double-click name column renameFile(path, newName)
Show folder Double-click row (except name column) getChildren(path)
Sort UI Only Click column header -
Filter UI Only Click 3 dots on column headers -
Search UI Only Search bar -
Move ⚠️ Coming soon - moveFile(path, newParentPath) (Untested)
Edit files ⚠️ Coming soon - uploadFile(path, file, onProgress) (Untested)
File icons Coming soon - -
Right-click menu Coming soon (UI Only) - -
Mobile Coming soon (UI Only) - -
Delete non-empty folders - -
Upload folders - -
Download folders - -

...And more!

Suggestions and contributions are welcome!

How it works

In essence, Disbox simply takes your upload files, and splits them to fit in Discord's (8MB) file size limit. It then stores metadata about the file like the file name and path in a separate database. This allows for a simple way to manage your files and download them back as one chunk.

Technical Details

This section will include techincal details about how Disbox is implemented. It exists to help understand why Disbox does requires certain things and what are it's limitations. It also includes challenges in implementing a project like this, for people who are interested.

Database

Disbox's database only stores file metadata, and the message IDs that contain the attachments for the files. Disbox uses webhook URLs as accounts, which are hashed on the client side. This means that even though disbox has the message ID, it can't access the message itself - so it can't access any of your files.

Discord API

Webhooks

There are 2 main ways to implement this project:

  • Bots: bots have a lot of permissions, and can eliminate the need for a database, storing everything, even metadata, on Discord itself. This is not recommended for 2 reasons:
    • Storing the metadata on Discord itself would make fetching the file system a much slower process.
    • It requires every user to create a bot account, which is a hassle, and makes using Disbox a lot more difficult.
  • Webhooks: While webhooks have very minimal permissions, they are very easy to create. This is the main reason Disbox uses webhooks and not bots.

CORS

As with any secure site, discord doesn't other websites to fetch and download data from the API. This is a big issue, because it blocks the ability to download your files from the web client.

There are 2 main ways to solve this, and because both are viable and fit for different use cases, Disbox implements both.

  • Proxy: All downloaded are forwarded to an external proxy, which downloads the files and sends them back to the client. Disbox uses the allOrigins proxy for this. This option is less secure as it exposes your data to the proxy. It also decreases download speeds as the proxy's server may be slower than Discord' servers.

  • Browser extension: Instead of forwarding the requests to an external source, Disbox uses an extension to download the files. This is the recommended option, but it requires a browser extension to be installed by every user, which is not always an option.

Comments
  • Suggestion: Log In system for quick access

    Suggestion: Log In system for quick access

    Currently, every time i want to access my data server, i need to enter my Webhook. This process is very slow, because i always have to copy it from discord or somewhere else.

    What if you can create a account / login to your account via GitHub, Google or what ever to get a list of all your Webhook / Media Servers and easily click on them to open it.

    But very interesting idea 👍

    opened by MiraculixxT 3
  • disbox can't read the files from the server anymore

    disbox can't read the files from the server anymore

    so the story is that I uploaded my files as a backup because I want to reinstall my windows, then when I tried to get it from the web of disbox, it was empty but the content is in the server. can you please tell me how to read these files on the server? image image

    opened by XXABOM7MDXX505 3
  • Read only mode/

    Read only mode/"keys"

    hello, this would be great for sharing files, but currently I cannot use it for this as it allows others to delete the shared files, perhaps there is some solution possible?

    if we can mount our disbox channels via something like fuse, i could use a webserver to list the files read-only

    opened by a8underscore 2
  • Can't delete empty folders + suggestion

    Can't delete empty folders + suggestion

    For some reason I can't delete empty folders, the "Delete" button is always greyed out. Also, is it possible to have a feature where you can generate a download link for sharing?

    bug 
    opened by yuen-li 2
  • Files won't download.

    Files won't download.

    I uploaded a ZIP file, but when I went to download it again, I got the following error: Failed to download file: TypeError: window.showSaveFilePicker is not a function. I am on Windows 11, using Firefox 108.0.1.

    help wanted 
    opened by s12227054 1
  • API?

    API?

    This could be sick if automated, it could be used for a lot of solutions such as auto backups (dodgy but better then no backups? xd)

    compared to the discord webhook api this could provide folders, auto splitting, and ofc files being viewable in the disbox website

    opened by a8underscore 1
  • Fix failed downloads when proxy is used

    Fix failed downloads when proxy is used

    Fixes a typo in fetchUrl() that caused fetchUrlFromProxy() to never be called, and an error to be raised.

    UI Alert: Error Alert

    Stack Trace:

    disbox-file-manager.js:93 Uncaught (in promise) TypeError: this.fetchfUrlFromProxy is not a function
        at e.<anonymous> (disbox-file-manager.js:93:34)
        at c (runtime.js:63:40)
        at Generator._invoke (runtime.js:294:22)
        at Generator.next (runtime.js:119:21)
        at ma (asyncToGenerator.js:3:20)
        at i (asyncToGenerator.js:25:9)
    
    bug 
    opened by TheNullicorn 1
  • Consider file encryption to make proxy downloads more secure

    Consider file encryption to make proxy downloads more secure

    As stated in the readme, CORS make it so you can't download files from discord directly. Disbox implements 2 ways to solve this:

    • The recommended one: a chrome extension that acts as a local proxy.
    • One for when you're in a hurry: an external proxy (currently allOrigins).

    In the current state, Disbox simply acknowledges that using an external proxy is less secure (becuase someone else can see your files), and that if you don't trust the proxy (which is a whole other discussion), you should just download the extension.

    However, it may be a good idea to also encrypt the files, for situations where the extension is not used. It's worth noting file encryption is not neccesary for extension usage as the files are secured by Discord itself.

    It's possible to keep Disbox's current model, where the server can't access the files itself, and all files are recoverable by the user, and provide a simple implementation, using the following flow:

    • When uploading, encrypt each chunk of the file using the webhook URL as the encryption key.
    • Do this for every file, even ones that are uploaded when the extension is installed, so they could be downloaded even without it.

    This also has a few disadvantages:

    • It's not neccesarily the best direction. It may be better to just make the external proxy needed in less use cases, for example, using an app or a Firefox extension.
    • It makes the files harder to recover. If the Disbox client goes offline for some reason, users which urgently need their files can't just download the files as chunks and merge them manually - it requires extra work and manual decryption.
    • It doesn't follow Disbox's current policy which is not handling security - and leaving it all to Discord. Truth be told, I'm not a security expert and sometimes it's better to admit that something is insecure (and let cautious users encrypt it before uploading), rather than claiming something is secure when you can't actually promise that.

    Even given all of these, the task at hand doesn't seem that complex, and it is a significant security improvemnt for proxy users - so it may still be worth to add it.

    Happy to hear feedback about this. I'd like to know what other people think and how important that is. Do you trust the proxy server? Do you even use it, or did you install the extension? Are you even aware you're exposing your data to a 3rd party? Maybe just a disclaimer is needed? Please share your opinions.

    help wanted 
    opened by DisboxApp 0
  • Rate limiting causes chunks not to be uploaded

    Rate limiting causes chunks not to be uploaded

    Basically what the title says. Sorry for all the screenshots, this was the best way I could explain it. I tried uploading a big file, about 2.2GB according to windows explorer, just for the fun of it. Screenshot_4964 However... it seems at around 74-75% discord starts to rate limit the webhook. Screenshot_4966 This causes some chunks to not be uploaded to Discord (there's more not listed in this screenshot) Screenshot_4965 Trying to download the file causes it to error out at the 74% mark, with an error stating this: Screenshot_4967 It's a bit inconvenient to chunk it into parts then upload those, so is there a way to fix this?

    bug good first issue 
    opened by billyboybob 7
  • Suggestion: Drag & Drop + Upload multiple files

    Suggestion: Drag & Drop + Upload multiple files

    Currently it is very tedious to upload multiple files, Issue #5 would help, but it would be nice to have drag + drop functionality. Also, please make it so you're allowed to upload multiple files at a time without clicking the upload button again.

    opened by pikapower9080 0
WhereMoney client web-application

WhereMoney WhereMoney client web-application Simple, Accountant, Finance, Helper, Personal Accountant Powered by TypeScript ReactJS Material-Ui Gettin

Asrez 3 Feb 14, 2022
OAuth 2 / OpenID Connect Client for Web API runtimes

OAuth 2 / OpenID Connect Client for Web APIs runtime This is a collection of bits and pieces upon which a more streamlined Client module may be writte

Filip Skokan 187 Jan 6, 2023
Next.js and Apollo-Client web application, designed for learning and real-world applicability.

NextJs Apollo Boilerplate Boilerplate for building applications using Next.js and Apollo This boilerplate is made for those who want to start a new pr

Youngjin Lim 9 Sep 4, 2022
Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client

TsToolbox Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client (inspired by ReKit) ⚠ ⚠ ⚠ Work in Progress ⚠

Daniel Nikravesh 7 Apr 14, 2022
It shows how to escape cross-origin issues for web client and API server using CloudFront routing.

AWS CloudFront의 URL Routing을 이용한 Web Client 및 API Server 구현 여기서는 CliendFront의 URL Routing을 이용하여 Web Client와 API Server를 구현하고자 합니다. Web Client는 Amazon

John Park 4 Nov 20, 2022
T3 is a client-side JavaScript framework for building large-scale web applications

Box has migrated using react, webpack, and the latest version of ECMAScript for our frontend projects as of 2018. We no longer support chan

Box 1.6k Dec 8, 2022
Web client with support for secret chats. Made as a temporary solution

Arcanugram – Unofficial Telegram Web App with support for secret chats ⚠️ Made as a temporary solution for use on devices that do not have any clients

null 12 Sep 19, 2022
Fnon is a client-side JavaScript library for models, loading indicators, notifications, and alerts which makes your web projects much better.

???????? Fnon is the name of my late mother, It's an Arabic word which means Art, I created this library in honor of her name. Fnon is a client-side J

Adel N Al-Awdy 5 Sep 11, 2022
Multithread emulator. The wrun allows you to dynamically run a function inside a Web Worker on the client side, without the needing of a dedicated file

wrun This lib allows you to dynamically run a function inside a Web Worker on the client side, without the needing of a dedicated file. This means tha

Felippe Regazio 9 Nov 5, 2022
Automatically generated documentation for the Valorant API endpoints the client uses internally.

Valorant API Docs To read documentation and get started, see Docs This is a project designed to automatically document Valorant endpoints based on a J

Techdoodle 223 Dec 25, 2022
Client-Side Prototype Pollution Tools

Client-Side Prototype Pollution Tools Match rules for Burp Software Version Reporter extension Match rules that passively detect vulnerable libraries

Sergey Bobrov 73 Oct 4, 2022
client-side prototype pullution vulnerability scanner

JSPanda JSpanda is client-side prototype pollution vulnerability scanner. It has two key features, scanning vulnerability the supplied URLs and analyz

Red Section 46 Dec 25, 2022
Front-end telkom-juara pwa client

TelkomJuara This project was generated with Angular CLI version 12.2.4. Development server Run ng serve for a dev server. Navigate to http://localhost

Dio Lantief Widoyoko 2 Dec 31, 2021
Free, open-source client or server-side APIs to "lint" user input.

passbird Free, open-source client or server-side APIs to lint user input. Right now, you can check type for an email address i.e., either of disposabl

Vaibhav Pandey 1 Dec 26, 2021
Venni backend - The backend of the Venni client apps implementing the credit card payments, matching algorithms, bank transfers, trip rating system, and more.

Cloud Functions Description This repository contains the cloud functions used in the Firebase backend of the Venni apps. Local Development Setup For t

Abrantes 1 Jan 3, 2022
Test for client-side script injection via NFTs

Rektosaurus A test suite to check for client-side script injection via NFTs. Overview NFTs contain a variety of metadata and content that gets process

Bernhard Mueller 42 Jun 28, 2022
A jQuery plugin for doing client-side translations in javascript.

About jQuery-i18n is a jQuery plugin for doing client-side translations in javascript. It is based heavily on javascript i18n that almost doesn't suck

Dave Perrett 202 May 19, 2021
Equibles Stocks - JavaScript client

Equibles Stocks - JavaScript client Installation For Node.js npm To publish the library as a npm, please follow the procedure in "Publishing npm packa

Equibles 4 Jul 8, 2022
This is an unofficial front end for Hacker News, reminiscent of the Windows XP era Outlook email client on a Windows XP default desktop

Hacker XP Hacker News styled as the Windows XP Outlook email client. Try out Hacker XP here! Description This is an unofficial front end for Hacker Ne

null 19 Jul 12, 2022