club-1/webdav-drive

WebDAV Drive is a file explorer running in a web browser that adds a Google-Drive-like experience to an existing WebDAV share

WebDAV Drive

WebDAV front-end that adds a Google-Drive-like experience to an existing WebDAV share, written in TypeScript with Svelte, Carbon and perry-mitchell/webdav-client.

It can be configured at runtime, not suckless style, with a config.json file in public/app.

Build...

1. Install the dependencies:

   make node_modules

2. Copy the sample config file into config.ts then edit it:

   make config.json

...for production

To create an optimised version of the app:

make

The public directory now contains the fully built production app.

...for development

Start the dev server using the following comand, then navigate to localhost:8080:

make dev

Translations

It is easier to manage the translations via Weblate, but it is also possible to directly edit the files. Always run make translations-sort after manually editing the translation files.

webdav-drive's Issues

Upgrade to webdav-client V5

webdav-client v5 has some breaking changes that affect us quite a lot:

Breaking changes:

[...]

• Upload progress no longer supported (onUploadProgress): perry-mitchell/webdav-client#319 (comment)

[...]

A workaround is suggested, by using a ReadableStream in the body of the Request element but this is not supported by Firefox nor Safari as to now¹².

See also:

• whatwg/fetch#1438
• https://stackoverflow.com/questions/35711724/upload-progress-indicators-for-fetch
• https://github.com/teil-one/fetch-api-progress

Footnotes

1. https://developer.mozilla.org/en-US/docs/Web/API/Request/Request#browser_compatibility, look for the "Send ReadableStream in request body" in the compatibility table ↩

2. https://caniuse.com/mdn-api_request_request_request_body_readablestream ↩

Localise Dates

using svelte i18n too

Hide labels of toolbar buttons only on small screens

Download folder as an archive

Tar, tar.gz or zip

This would require to design an extension to the webdav protocol and to write a plugin Sabre dav.

So it would be a good Idea to write it as a plugin for webdav-drive also.

Depends on club-1/webdav-server#2

Move and copy files

• Move files/folders
• Copy files/folders

More reliable large file upload

Using chunked upload through WebDAV PATCH method. Luckily Sabre/Dav supports it, but the client does not seem to.

This would allow to upload files larger than the limit thus allowing to lower the body size limit.

Also by saving the last uploaded chunk it could be possible to pause and start upload again.

List similar and assimilated projects

Web interfaces

• https://github.com/Kysic/webdavFileTree (quite similar)
• https://github.com/gitnicolas/webdavjs
• https://github.com/dom111/webdav-js (not really understood)
• https://github.com/xstefanox/carcass
• https://github.com/jlbprof/BrowseWebDav

Libraries

• https://github.com/sara-nl/js-webdav-client
• https://github.com/frsela/jsDAVlib

Rename files (and folders)

Maybe by adding a row of overflow menu

Replace pop up with carbon modals

For visual unity

Check all checkbox

At the top, in the header table line

Select visible columns using a ToolbarMenu

Selected columns would be remembered in localStorage

add account statitics

It would be useful to display account storage usage ideally but at least size used on the drive of the user home folder.

Think about plugins

Because if we want webdav-drive to be used with another WebDAV server, it will become necessary to export our specific features outside of the core and in separated plugins.

Upload file

With a drop box.

Use carbon progressbars for file uploader

for file uploader : https://carbon-components-svelte.onrender.com/components/ProgressBar

Fonts are loaded via a CDN

This is because of the carbon-components-svelte stylesheet.

Related to: carbon-design-system/carbon-components-svelte#1516, carbon-design-system/carbon-components-svelte#493, carbon-design-system/carbon-components-svelte#1593

I first thought about compiling the SCSS stylesheet ourselves but the parameter that we need is only there in the newer carbon stylesheets.

See: carbon-design-system/carbon-components-svelte#1385 (comment)

carbon-components must be used as @carbon/styles applies to v11.

public upload page

One thing I missed in many drive-like application is the ability to create a drop zone to allow non-unix-users to upload some files.
I don't know how we could integrate this feature. It may totaly be impossible.
But I think the idea interesting as it has been a question for me at multiple times for different projects that needed to gather archives from different sources.
It would be smoother than opening multiple WeTransfert from many people and then uploading them manualy.

But I agree this must be very dangerous in many ways.

• amount of data -> but if each unix user have a limit this should be fine
• viruses -> I don't know, maybe writing file and not allowing them to be executable is a little frontier. And an external user should'nt be more trustfull than a regular user.

I've already worked on a tool to achieved this in PHP but I don't remember at which stage was I...

https://github.com/vincent-peugnet/droppage

Directory tree pannel on the left (when enough space)

Will be useful for moving files via drag and drop. And also for standard navigation.

Display Unix permissions and ownership

This is not a part of the WebDAV protocol so it would need a plugin for the backend.

Thus, it should also be a plugin for webdav-drive.

Depends on club-1/webdav-server#3

Sort files, at least by name

Option to keep directories together on sort

Like usual file explorers

Upgrade to Carbon Components Svelte v1.0.0

This is a major change to Carbon Components Svelte as it also upgrades the Carbon stylesheet from v10 to v11. It is not released yet, but we can already try to see if anything breaks or if we will need to change some things.

See carbon-design-system/carbon-components-svelte#1614

Svelte projects consuming carbon-components-svelte will need to include SCSS preprocessors.

This is interesting as it will allow use to fix #58 in a proper way, as I imagined initially, by setting the $font-path parameter to an appropriate value. This in turn will allow to get rid of rollup-plugin-bundle-fonts introduced in 635ad42, and probably also the commonjs loader as I think it is the only non ES module of the project (and newer project are almost all ES modules).

Add quick CI that would run `npm run check`

Using GitHub CI

Create symlink

This will require an implementation of rfc4437, unfortunately it is not planned by Sabre/dav, so this will require another plugin.

Depends on club-1/webdav-server#4

Hide hidden files

Hide .dotfiles

Show the loading on the DataTable someway

Because right now it is confusing

I want new issue

first

cf: vincent-peugnet/wcms#2

Scrolling back to the top of the page when selecting files

It's useful when selecting one file, to go to the actions like cut or move, but it doesnt work well with multiple files:

Upgrade some dependencies when we want to drop Node 14

• https://github.com/kaisermann/svelte-i18n/blob/main/CHANGELOG.md#400-2023-10-16
• https://svelte.dev/docs/v4-migration-guide
• https://rollupjs.org/migration/

Try to guess and display max upload size

I did it on Wcms, and I found this quite useful.

In my case, I think I was reading PHP parameter and admin parameter and then then displaying the bottleneck value. Maybe it's very complicated to browse all the chain of settings on a server and display the bottleneck.

display symlinks specificly

First idea is to use Icon with arrow but maybe with an infobulle as well

Depends on club-1/webdav-server#3

Display folders in blue instead of files

To match the other directory listings' style:

• cgit (example)
• ls (example)

For this we will need to stop using links to open files, and maybe as details is now in the overflow menu, it could be opened by a click on the row.

Add left sidebar

Move "log out" and "account informations" in left sidebar.

Warn about not sharing the files' URL as it contains the credentials

Using a modal with a checkbox to not remind again.

Keep session open on page refresh

Probably by storing credentials in session storage.

Dynamic settings loading

Currently, the settings must be changed before compiling (suckless style), but it would probably be good to make it dynamically loaded so that I can release a packaged version.

Add version number in bundeled app based on `git describe`

Because right now there is no way to know what is the current version from the app.

I18n

Probably using svelte-i18n

Middle overflow ellipsis for file name

this ways one can see the start and end of a file name when it is truncated.

Displaying upload progress forever

When I upload files it shows the progress bar for uploading the file but it never finishes.

When I reload the page the file is uploaded.

Create share-link

• enable apache userdirs on public directory
• add action that creates a symlink in public/links based on a hash
  • define the hash function
  • define the content of the hash (filename + date [+ secret ?])
• display the resulted link in a box and pre-select the content

Depends on #11

button to toggle display of hidden files

add a small footer that link to githup project

I personally really like to be able to jump to github when I found idea or bug. (I'm using this with antilope and I use it a lot !)

this could of course be a feature that can be deactivated by admins, but when software are at this stage of development it can help users to get an idea of how they can have more info, discover and help.