• A <meta tag for view port would help
• A button to add files as drag doesn't work on mobile

Fix

ul.list li a.copy, ul.list li a.delete, ul.list li a.download, ul.list li a.move, ul.list li a.rename {
  color: transparent;
}

Hi!

First, thanks for a nice project! I like how I can have an otherwise static (looking) website but easily turn it into a file manager with a click of a button.

However, I noticed that it lacks any upload progress indicator, which might be an issue when uploading a gigabyte-sized files via not-so-fast connection.

Probably that's because underlying fetch API doesn't support it.

It looks like a suggested workaround is to use "good ol' XMLHttpRequest". In a quick test, I was able to use it to issue a PUT request to upload a file to my webdav server (running nginx) while monitoring progress in console.

What do you think about it? I see that file upload logic is located in a separate file, so it should be possible to change even for me.

Would you be interested in such pull request, or would you prefer to do it yourself?

I have a router with connected SSD. And there installed lighttpd + webdav. Now I wish to use the webdav share instead of Google Photos for my family. I've put the webdav.js there and now my wife can see list of photos just from her iPhone. But ideally she also needs to see small miniatures i.e. thumbnails.
There is a spec for "external thumbnails" where there are stored into a hidden folder .sh_thumbnails. You may generate it with the script https://github.com/stokito/genthumbs/tree/posix
It's not widely supported yet because of chicked-egg problem but I believe that the webdav-js can do this easily.
If the .sh_thumbnails folder exists then the webdav-js may try to load a thumbnail from it,
Will you accept a PR with the feature?
I may not have enough time so if you are interested in the feature you may mark it as "help needed" and maybe someone else will be interested too,

Add a download link in the actions section for all files

A WebDAV server can be embedded in a context where not everything around it is WebDAV; for example, there could be some web site with a /files/ section that is WebDAV enabled and uses webdav-js as its index.html (or, more atypically, a single folder could have WebDAV disabled).

When directory navigation reaches such a point, a PROPFIND ${path} failed: Not Allowed (405) message is shown, and the view keeps spinning. The better behavior IMO would be to fall back to just navigating the browser there -- chances are it will succeed in a GET and can do something more sensible.

For security reasons some servers are not connected to the internet disabling the use of a CDN.

Hi dom,

I have an error occuring after basic login. Of course, when I head to the webdav path, nginx will show me the 403 error page and a basic login window. I log in and afterwards it looks like this:

Even thought the error appears, I am able to create a new directory but upload does not work, it through same error.

browser console: webdav-min.js:1 HEAD / net::ERR_ABORTED 403

When navigating around, update the page title - should be barebones either just the path, or maybe server/path. Possibly WebDAV:server/path but that seems too long to be useful...

Running this test on my work machine results in -n being added to the content of the file.

Hey,

I was wondering if someone can help?

I've deployed this to IIS, everything seems to be working great other than the MOVE which I get a 400 error for...

Any ideas?

Regards,

Jamie

When I click a file that's not opening in the lightbox, webdav-js seems to try to download them completely and only then puts them up for download. That can take some time (seconds or minutes) and only then results in a download box.

Sure that could be mitigated by displaying something or making the page icon spin, but I think the clearer way here would be to just leave it as a link to the target resource and let the browser do its sensible things with it. For example, in Firefox, clicking such a file's download link opens me a download box practically immediately (offering to open or save), keeps the current page open, and runs the download independent of it.

The readme file's JS bookmark code says ..."https://cdn.rawgit.com/dom111/webdav-js/master/assets/css/style.min.css"..., while the file in assets/css is named style-min.css.

As a result, practically no styling gets applied, and the result looks like "My Foldernamexmoverenamecopy". When the link is fixed manualy, everything looks nice.

When listing the contents of a folder with files containing whitespace or other characters, percent-encoded names are shown.

This is probably because the links (eg. <D:href>http://.../Some%20Name/</D:href>) are are taken literally and shown as a link to Some%20Name rather than Some Name. Unless there is a better indication, I think it makes that file and folder names, when prepared for display, are percent-decoded and interpreted as UTF-8, or possibly using the encoding of the HTML file.

I tested this with files served by lighttpd which sends no displayname; I did not test this with a WebDAV server that does send a displayname. (Mainly because nginx, which is the server I know to do that, has a bug that would cause the exactly same error on its own).

I had a comment logged at:

https://dom.hastin.gs/blog/coding/wevdav-js-update/475/comment-page-1#comment-42535

stating that uploaded images aren't loading properly after uploading. I've also noticed some weird behaviour after testing this so I'll investigate. I'm going to assume this is related to the fix for #5 (removing sendAsBinary and replacing with just send) but I need to investigate if I'm missing something being set or if this is a browser issue.

Hi dom,

I'm using your webdav js quite often and I was questioning myself if it would be possible to upload complete folders with files in it? What do you think about?

greetings
niel

Could perhaps switch to using CSS only icons?

WIP: https://codepen.io/dom111/pen/XybxqX

https://choosealicense.com/

I found a great online site to see a webdav share
https://katomaso.github.io/webdave/

So I enabled CORS headers and now can access my webdav with it. This may be a more user friendly for regular users and may be turned to a PWA.

Here is a sample of PWAs that works with webdav+cors:

• https://diffuse.sh/ a music player
• https://app.super-productivity.com/ a powerful TODO App

And here is a Lighttpd config that I used:
https://gist.github.com/stokito/0a6274106d407ba6d9fb776e7773445d

I also asked it's author to consider to merge or grab some source from the webdav-js

katomaso/webdave#6

Just gave this a run, and very impressed as to how the javascript is so cleanly separated from the server.

When using an Apache mod_autoindex to generate a directory listing, I get this effect below - the directory listing appears twice, once inside a ul tag as provided by mod_autoindex, and a second time via a ul tag embedded in a main tag:

Am I misunderstanding how this works?

Purpose:
Within apache conf its possible to grant access to folders for different users. Instead of granting access to a folder for more than one person, which would also be a way to make sharing happen, with a symlinked folder you can grant access to a single folder inside the user folder.

Problem right now:
Im able to access and control the symlinked folder by typing the path in the url but the folder is not shown in the list.

Question:
What you think about it? Do you find this enhancement is needful or are there better ways to accomplish that?

To test all file types, font, video, image, code.

I think ideally font, video, image items would be taken from the internet, rather than stored in the repo, code could come from the package itself.

Reintroduce the copy/move functionality and add a treeview to display the folders to copy/move to.

As part of this, probably need to add a checkbox to the start of each list row to allow bulk operations.

Whilst making the general gallery functionality, it's clear that BasicLightbox isn't quite right for that job, it'd be nice to have something, still lightweight, but that supports a replace instance method or something similar to make this transition a little easier.

Another detail: when you open an Image with transparent background, the html background is almost too black.

Background color might be too dark with transparent images

.basicLightbox {
    background: rgba(0,0,0,.8);
}

.basicLightbox {
    background: rgba(0,0,0,.5);
}

rgba set to 0.5 is already a lot better.

Originally posted by @nielll in #53 (comment)

Hi,

Thanks for the awesome tool by the way!

I was wondering if someone could help me...

When uploading a file, or creating a directory, the list doesn't refresh (i'm using Chrome).

I've added a refresh button, and put in a 'location.reload()' upon creating a directory or uploading a file - Which works fine, except if the user has navigated to a sub-directory - Then the refresh doesn't have the index.html so doesn't load...

Is there a function I can use to reload the list?

Thanks in advance.

The lack of a trailing slash in MKCOL URLs leads to ngnix refusing creation with a slightly confusing 409 error. RFC4918 indicates that there should be a trailing slash as a collection is identified, and while there is a convention for the server to let things just work without one, it doesn't always.

Adding a slash in the input form does not work as a workaround (understandably so, IMO it shouldn't); appending a slash in the code before it hits the MKCOL request should be easy, though.

When I try to move a file I won't get folders shown to which I could move the file. I only get a Folder named / and can't open the Folder.
As I noticed after testing it with GitPod this is the same error as when the Server was down. But the Server does run in the background.

The server is using mod_webdav on Apache over SSL. Apache terminates the SSL connection it self.

https://editorconfig.org/

EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles.

When a filedirectory comes back 403, the "changing the folder" spinner stays on and the console reports

XML Parsing Error: mismatched tag. Expected: </hr>.
Location: http://my-host/a-forbidden-directory
Line Number 6, Column 3:

To me it looks like there go wrong two things:

• The returned media type is not text/xml but text/html, but parsing it as directory listing XML is still attempted.
• The returned representation came back on a 4xx code, indicating the response is an error and not a representation of the requested resource, and parsing is still attempted.

I think the desirable behavior would be to show some (probably modal) error message, possibly even an iframe(-ish? are they still a thing?) representation of the HTML response.

edit: I tested this originally on directories but mistyped it as files. Correcting that I tested it on files as well, and they could probably use the same fixes, given that a 403 HTML file displays the error message (syntax highlit -- cool!) and tries to play the media.

When a popover is opened in a collection, there is no indication to the user which file is being displayed.

I'd suggest that the page title is updated temporarily, and that the file name be shown above or below the image / movie.

Uploading a ca. 10MB file per drag-and-drop freezes the browser (Firefox 61) for several seconds, to the point when the yellow "A page is slowing down..." bar appears on top.

I'm not experienced in JavaScript debugging, but what I think I found is that the frame rate drops to zero during the load DOM event, and lots of time are spent continuously in the sendAsBinary function. If that processing is actually necessary, maybe it can be moved out to where it does not freeze the UI any more?

As per #94 Might be advantageous to add a plugin mechanism so that features like this could be easily implemented.

https://tools.kali.org/web-applications/davtest

GLightbox does from what I can tell all the things featherlight does:

• https://glightbox.mcstudios.com.mx/
• https://github.com/mcstudios/glightbox

rawgit is shutting (shut?) use jsdelivr instead

Currently, only the deliberate dropzone at the bottom of the page can have files dropped on to it, but I think it'd be better to have a dropzone for the whole page.

Nice to have: when dropped onto a folder, upload to that folder.
Nice to have: when hovered over a folder for 2-3 seconds, load that folder. Include parent folder in this.
Nice to have: allow moving files using the same mechanism.
Nice to have: allow copying files using the same mechanism + Ctrl/Cmd

Possible bug: ensure cache is updated on file upload (thanks @dmitrydvorkin on #1)

Hi Dom,

I just discovered another little detail to improve: When you click a pdf it directly downloads it instead of trying to open it in browser.

In collections heavy with overlay-viewable files, it would be convenient for some use cases to navigate the items in the collection from inside the overlay view, maybe using left/right or up/down arrow and/or clickable arrows next to the file name if #59 is implemented. (Generally, this depends a bit on #59, as while originally the user should know what they opened, no information is available to them any more when going from one item to the next).

This would be very useful in collections containing lots of images, as it allows effortless walks through an album. Some care might be necessary around interactive content (movies, PDFs), as their usage model might mean that they should receive some arrow keys (whatever is default in the browser's built-in media player; probably left-right for seeking) that might need priority over switch-to-next-item arrow key usage.

One reason not to do this would be to keep webdav-js from becoming a gallery viewer, which (while being useful) is not the usual purpose of a file manager (although some functionality does overlap).

It would be nice to have a Index of / or similar line at the top to tell you what your current working directory is. I've tried to hack around it but I don't find any event that's fired on the navigation.

Multipule file drag-and-drop works, but using the import on mobile does not.

Having tested it seems to be an issue with FF on mobile.

Andriod

• FF (https://support.mozilla.org/en-US/questions/1227789)
• DuckDuckGo (has other issues: 383 313)
• Chromium
  • Chrome
  • Ecosia
  • Brave

Other little detail: Could it be possible to sort directories and files separately?

Originally posted by @nielll in #53 (comment)

To me the name seems overly generalized.

I already have a webdav server running.....and I can't figure out how to specify the url, username, and password. My javascript skills are not very good so any help you can offer would be appreciated. Thanks!

Hi, I found another bug! :) Steps to reproduce:

1. Upload a file
2. Try to upload a file with same name
3. When asked if you want to overwrite it - say "Cancel"
4. Try to delete this file
5. When asked if you want to delete it - say "Ok"

Expected behavior: file should disappear from the list.

Currently, the file is deleted on server, but stays in the list.

Don't know if it's relevant, but I tested with empty file called "file1". Also, it doesn't matter if you reload the page between steps 1 and 2.