dufs Photo Viewer

10 September 2025

dufs is a fantastic piece of software which fulfilled my oddly specific need for a fileserver which worked on a local network, felt relatively native, could be accessed through a terminal (albeit via SFTP/WebDav), and which did not under any circumstance ever make me use Samba. That protocol has been a black hole for data for me, I’ve lost so many files using it, it was also hugely unstable and lead to me having to restart my headless server at least once a day.

So when I came across dufs, which runs as under 3MB of Rust, and provides a Google Drive-eque interface via a local server on the browser, with encryption, accounts, the works, I installed and tried it, and immediately breathed a sigh of relief that I’d never have to see another SMB Error log ever again with any luck.

One thing I think could be improved about dufs (though which is not its primary function) is a photo viewer. Currently, all you get is a list of files, which when clicked on either download the file directly, or which opens a fullscreen view of an image. This is difficult for viewing photos, to put it nicely.

But dufs includes a really easy-to-use API, which can be accessed from a static HTML file (which incidentally, it can serve with no issues too!). And to that end, I decided to write my own viewer.

The following code is - well I shan’t use the word I have in mind currently, but it’s SERIOUSLY TERRIBLE. It takes ages to load, doesn’t have any navigation whatsoever, and looks like raw unstyled HTML - because it is.

Here’s how to get it working:

  1. Copy the below HTML and paste it into a blank html file on your dufs server, somewhere you’ll remember about it when you need to look at photos. I put it in “/photos”, but it’s up to you.

  2. Navigate (in dufs) to any folder containing photos. Copy the full URL in your browser’s bar.

  3. Go to the viewer HTML file, and open it. In the “Base URL” box, paste the URL you just copied. Click “Load photos”, and see your photos load - in full resolution so very slowly!

NB. You can click the photos to download them or open the files, whichever is your browser’s default.

This is some horrendously lazy code, I realise that! Sometimes all you need is a quick-and-dirty solution, and this does the trick! Feel free to improve on it and share it again if you wish. Contact me if you do anything impressive!

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dufs Viewer</title>
</head>
<body>
    <input type="text" name="base-url" id="tbox-base-url" placeholder="Base URL">
    <button onclick="loadPhotos()">Load Photos</button>
    <div id="image-collection"></div>
</body>
<script>
    function loadPhotos() {
        baseURL = decodeURI(document.getElementById("tbox-base-url").value)
        document.getElementById("image-collection").innerHTML = ""
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                obj = JSON.parse(xhttp.responseText)
                console.log(obj)
                for (let i = 0; i < obj.paths.length; i++) {
                    const element = obj.paths[i];
                    if (element.path_type == "File") {
                        document.getElementById("image-collection").innerHTML += "<a href='" + baseURL + element.name + "' target='_blank'><img src='" + baseURL + element.name + "' class='viewer-image' loading='lazy'></a>"
                    }
                }
            }
        };
        xhttp.open("GET", baseURL + "?json", true);
        xhttp.send(); 
    }
</script>
<style>
    .viewer-image {
        width: 30%;
        padding-right: 10px;
    }
</style>
</html>

Tagged as: indie-web web coding technology projects