https://github.com/kd2org/webdav-manager.js
Lightweight JS WebDAV client
https://github.com/kd2org/webdav-manager.js
file-browser javascript js webdav webdav-client
Last synced: 8 months ago
JSON representation
Lightweight JS WebDAV client
- Host: GitHub
- URL: https://github.com/kd2org/webdav-manager.js
- Owner: kd2org
- License: agpl-3.0
- Created: 2022-10-09T19:44:57.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-01-05T03:20:04.000Z (over 1 year ago)
- Last Synced: 2025-03-25T09:47:27.445Z (about 1 year ago)
- Topics: file-browser, javascript, js, webdav, webdav-client
- Language: JavaScript
- Homepage: https://fossil.kd2.org/webdav-manager/
- Size: 352 KB
- Stars: 44
- Watchers: 5
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# WebDAV Manager, a lightweight JS WebDAV client
This is drop-in JS client that you can use to enhance the web interface of a WebDAV file server. Or you can use it on your computer to access any WebDAV server without installing anything.
* Fossil development repo:
* Git mirror:
## Features
* Order files by name, date, or size
* Create new directories
* Create and edit text file
* Delete files and directories
* Rename and move files and directories
* Upload files directly from browser
* Upload files using copy and paste!
* Upload files with drag and drop
* Preview of images, text, videos, audio, MarkDown and PDF
* [MarkDown live preview when editing MarkDown files](scr_markdown.png)
* Support for viewing/editing document files via WOPI clients (OnlyOffice, Collabora Online, MS Office)
* Download files individually
* Download all the files of a directory at once
* Localization support
* Responsive: works with mobiles and desktop browsers
* Support for light and dark theme
* Only 8KB gzipped!
* Single file, self-contained, no dependencies, no silly NPM stuff!
### Planned features
* Select multiple items to move/delete
* Upload progress status for large files
* [Resumable upload via TUS](https://tus.io/protocols/resumable-upload.html) to upload large files
## Compatibility
This has been tested with the following servers:
* [KaraDAV](https://github.com/kd2org/karadav/)
* Apache 2.4 mod_dav
* NextCloud
## Demo
You can try the demo live at [https://kd2org.github.io/webdav-manager.js/demo.html](https://kd2org.github.io/webdav-manager.js/demo.html).
You can review the source code in this repo: the password is never stored, and only sent to the WebDAV server as part of basic auth.
This demo will only work with a WebDAV server that allows cross-origin requests (see section on CORS below).
## Usage
If your HTML page has a `data-webdav-url` attribute, the file manager will open up automatically using this URL when loading the javascript:
```
```
If you want to specify extra options, you can also just call the `WebDAVNavigator` function, the fist parameter being the WebDAV URL and the second being an object defining options.
```
WebDAVNavigator('http://localhost:8080/dav/', {'user': 'demo', 'password': 'abcd'});
```
### Options
* `user`: HTTP basic auth user name
* `password`: HTTP basic auth user password (not required if the HTML page is already in a password-protected directory)
* `wopi_host_url`: URL of the WOPI host to edit Office documents
* `wopi_discovery_url`: URL of the WOPI discovery XML, used to edit Office documents
## Install as the client for your WebDAV server
Just copy the `webdav.js`, `webdav.css` and `index.html` files to the root of your web server.
Edit the `index.html` file and change `data-webdav-url="/dav/"` to the actual web path of your WebDAV server. For example with ownCloud this might be `data-webdav-url="/owncloud/remote.php/webdav/"`.
### With Apache
Follow a [tutorial to setup WebDAV in your Apache](https://www.digitalocean.com/community/tutorials/how-to-configure-webdav-access-with-apache-on-ubuntu-18-04) and change the virtual host to something like that:
```
ServerName webdav.localhost
DocumentRoot /home/web/webdav-manager.js
DAVLockDB /home/web/davlock.db
# Actually store files in /home/web/data
Alias /dav /home/web/data
AuthType Basic
AuthName "webdav"
AuthUserFile /home/web/users.htpasswd
Require valid-user
# Disable handlers
SetHandler !
# Disable PHP
php_flag engine off
DAV On
# Magic: use WebDAV manager for directory listings
RewriteEngine On
RewriteCond %{REQUEST_METHOD} GET
RewriteRule .*\/$|^$ /
```
## Install as a local client
Just copy the `webdav.js`, `webdav.css` and `demo.html` pages to a directory on your computer, open `demo.html` with a web browser, then fill-in the server URL, user login and password, and you'll be connected :)
### CORS
For the client to work in this mode, your WebDAV server MUST set the following HTTP headers for `OPTIONS` requests:
```
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Authorization, *
Access-Control-Allow-Methods: GET,HEAD,PUT,DELETE,COPY,MOVE,PROPFIND,MKCOL,LOCK,UNLOCK
```
If your server doesn't set these headers, you won't be able to use this client, this is a security limitation of web browsers.
### NextCloud
As an example, here is the Apache configuration that will allow your local client to make requests to a NextCloud server:
```
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Credentials "true"
Header always set Access-Control-Allow-Headers "Authorization, *"
Header always set Access-Control-Allow-Methods "GET,HEAD,PUT,DELETE,COPY,MOVE,PROPFIND,MKCOL,LOCK,UNLOCK"
Header always set Allow "GET,HEAD,PUT,DELETE,COPY,MOVE,PROPFIND,MKCOL,LOCK,UNLOCK"
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]
```
## License
This software is available as:
* GNU Affero GPL v3 (this repo)
* A commercial license to include in proprietary products
Contact us :)
## Authors
* KD2.org / BohwaZ 2022
## Other solutions
* [webdav-js](https://github.com/dom111/webdav-js)
* [WebDavFileTree](https://github.com/Kysic/webdavFileTree)
* [WebDAV Drive](https://github.com/club-1/webdav-drive)