Git Product home page Git Product logo

web's Introduction

Disbox Web Client

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)
Share files "Share" column getAttachmentUrls(path)
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 -
File icons ✅ UI Only On the left of the file name -
Move ⚠️ Coming soon - moveFile(path, newParentPath) (Untested)
Edit files ⚠️ Coming soon - uploadFile(path, file, onProgress) (Untested)
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 (25MB) file size limit. It then stores metadata about the file like the file name and path in a separate central 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 allow 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 directly.

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.

web's People

Contributors

delibrete avatar disboxapp avatar sayrix avatar thenullicorn avatar tris203 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

web's Issues

Move Share B64 String to UseLocation Hook

When sharing a base64 string, we should move the encoded string to after a # and use the location hook.

This is because technically, the encoded URLs are sent to the server, there would be better security if they were in the section after the hash as this is available to the browser only

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.

Share files/folders

Being able to share a download link to a file/folder would be really convenient.

I can't share a file larger than 1 GB

Good morning, I have been using Disbox to host files on my friends' servers. Everything is working fine but there is one problem that I am not too happy about that.

When I share a larger file (over, for example, 2.1 GB), the site won't let me share it. I get an error called Failed to share file: NotAllowedError: Failed to execute 'share' on 'Navigator': Must be handling a user gesture to perform a share request.

I have been trying in several browsers with Chromium (for example Microsoft Edge or Opera GX) and even with Google Chrome, although it works the first time, but the second and the following attempts it stops working.

I will attach the screenshot of the error in case someone (or the developer of the page) can help.

P.S. I'm using the extension recommended by the developer (DisboxDownloader).

image

No folder upload

I can't upload full folders at one time, for example - a tv series. I have to manually add each episode/file.
Would be good to be able to drag and drop files and folders.

Other than that, Disbox is great!

firefox extention

Firefox support would be great, although not really a high priority issue ig

not all browsers support the web share api

when sharing on firefox, i just get an error saying navigator.share is not a function. after doing some googling, i found that only a handful of browsers support navigator.share, firefox not being one of them. you should probably confirm that navigator.share exists, if not, copy to clipboard

What license is this project covered by?

I would like to make modifications to this project and change how it functions to make my own variation, but before I get too far would like to know what license you wish to cover this work under and what permissions I have with it. You've done an excellent job designing the UI and making this method of storing files a reality.

Adding media player

I use disbox to store my movies, and some photos. (Just as a backup).
It would be nice to be able to play media files in the browser instead of having to download it.

Cant download any files bigger than 200-500MB

When i try to download some bigger file (bigger than 500MB) i got this error and site is freezing with greyed out buttons
image

Error is in Polish but translates to something like this: "The enull value is not a snowflake."
Tested on Microsoft Edge (chromium) with DisboxDownloader Addon

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

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.

New problem for me

I can't download anything else unless something that is small in size [picture}, if anything that is kinda huge in size it is downloaded but the file had became corrupted and unusable but it seems like it stopped downloading at a certain point and also the buttons will not work after clicking it too all of the sudden.
image

Can't share or download files

In Chrome, I keep getting the error "Failed to share file: TypeError: Cannot read properties of undefined (reading '0')

Uploading files

I have an error when i try to upload files:

Failed to upload file: Error: Failed to sendAttachment with status 400: {"webhook_id": ["\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u00abdiscord.gg\u00bb \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f snowflake."]}

Make file share links shorter

We would probably want the server to keep a shortened form, but that would require it to have access to the files.
Maybe this could be okay because shared files are already kind of public.

We could also solve this with automatic URL shortening using a 3rd party.

Please share opinions

Referring to issue #10

i want to self host this on my repo but the problem is that idk how to do it, i've done the github pages part but i dont understand the server part, does it mean that i have to host the server somewhere in cloud? is there any free alternative way i can use like github pages for hosting?

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

500MB Nitro?

Can be possible to add a feature to enable/mark a file size chunk of 500mb instead for nitro users. Ofc there is not any advantage of doing so but this will mean less files posted on the server hahaa, im plaining to upload big files of 20gb average

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?

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

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.

suggestions:

Could you please make a discord server so it is easier to share ideas/trouble shoot?
also could you please add a way to use more than one webhook or upload more than one file at a time such as batch selection.
I would also appreciate if there was a way to batch delete files.
thank you

Download API error

Acess to fetch at 'https://api.allorigins.win/raw?url=https%3A%2F%2Fcdn.discordapp.com%2Fattachments%2F1083316848059232296%2F1083317251211542598%2F4752_8' from origin 'https://disboxapp.github.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Uncaught (in promise) TypeError: Failed to fetch at disbox-file-manager.js:42:18 at c (runtime.js:63:40) at Generator._invoke (runtime.js:294:22) at Generator.next (runtime.js:119:21) at $ (asyncToGenerator.js:3:20) at i (asyncToGenerator.js:25:9) at asyncToGenerator.js:32:7 at new Promise (<anonymous>) at asyncToGenerator.js:21:12 at Ln (disbox-file-manager.js:41:16)

upload multiple files

how can i upload multiple files? i know that i cant upload a folder but is it possible to upload multiple files from one folder?

All my files are gone!

Up until a week ago when I went to the Disbox website all my files were visible and I could download and upload them. At the moment the site only shows "No rows" and I can't see ANY of my files! Can anyone help me with this?
image

failed to share

Failed to share file: NotAllowedError: Failed to execute 'share' on 'Navigator': Must be handling a user gesture to perform a share request.

(bug) Download not working

Hi, I can't download any files. Attaching screenshot with error and dev console.

(after click on download)
image

(after click on OK in alert)
image

Download button not Working

I can upload files and everything but after I go to the download link, The button doesn't work at all. I tried with 1kb file to 200mb file, Nothing works

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 👍

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.