feature request: preview on files, txt, jpg, mp4,mkv etc..

[Giuseppe-TD]

it is possibile to add a preview when a file is sent to someone, and the people open the links and show the preview of the file?

[Forceu]

Thanks for the feedback. Although I see why it would be useful, unfortunately it would be a lot of effort to implement. I will keep this issue open, but won't be implemented in the near future

[Giuseppe-TD]

i write a custom public.js with this:

-----------------------*

const card = document.querySelector(".card");
if (!card) return;

card.style.width = "100%";
card.style.maxWidth = "800px";
card.style.margin = "0 auto";
card.style.backgroundImage = "linear-gradient(45deg, #8E68B7 40%, #af4cd3)";
card.style.borderRadius = "20px";
card.style.overflow = "hidden";
card.style.border = "none";

const cardBody = card.querySelector(".card-body");
if (!cardBody) return;
cardBody.style.background = "transparent";
cardBody.style.padding = "1em";


const sizeEl = cardBody.querySelector(".card-text");
if (sizeEl) {
    sizeEl.textContent = sizeEl.textContent.replace(/^Filesize:/, "Dimensione file:");
    sizeEl.style.marginTop = "1em";
    sizeEl.style.marginBottom = "0.25em";
    sizeEl.style.fontWeight = "bold";
    sizeEl.style.fontSize = "1rem";
    sizeEl.style.color = "#ffffff";
}


const origTitle = cardBody.querySelector(".card-title");
if (!origTitle) return;
const fullName = origTitle.textContent.trim();
origTitle.style.display = "none";

const displayName = fullName.replace(/\.[^/.]+$/, "");
const h3 = document.createElement("h3");
h3.textContent = displayName;
h3.style.fontWeight = "bold";
h3.style.margin = "0 0 1em";
h3.style.color = "#ffffff";
cardBody.insertBefore(h3, origTitle);


const ext = fullName.split(".").pop().toLowerCase();
const id = new URL(window.location.href).searchParams.get("id");
if (!id) return;
const previewURL = `./downloadFile?id=${id}`;

let previewEl = null;
const imgExts = ["png", "jpg", "jpeg", "gif", "bmp", "svg", "webp"];
const videoExts = ["mp4", "webm", "ogg", "avi", "mkv", "mov", "flv", "wmv", "m4v", "3gp", "mpg", "mpeg"];

if (imgExts.includes(ext)) {
    previewEl = document.createElement("img");
    previewEl.src = previewURL;
    previewEl.alt = displayName;
} else if (videoExts.includes(ext)) {
    previewEl = document.createElement("video");
    previewEl.controls = true;
    previewEl.controlsList = "download";
    const src = document.createElement("source");
    src.src = previewURL;
    // per container non-standard, lasciamo type generico
    src.type = `video/${ext}`;
    previewEl.appendChild(src);
}

if (previewEl) {
    const frame = document.createElement("div");
    frame.style.border = "2px solid #444";
    frame.style.backgroundColor = "#222";
    frame.style.padding = "0.5em";
    frame.style.borderRadius = "4px";
    frame.style.marginBottom = "0.25em";
    previewEl.style.display = "block";
    previewEl.style.width = "100%";
    previewEl.style.height = "auto";
    previewEl.style.margin = "0";
    frame.appendChild(previewEl);
    cardBody.insertBefore(frame, origTitle);
}


const small = document.createElement("small");
small.textContent = fullName;
small.style.display = "block";
small.style.color = "#ddd";
small.style.textAlign = "center";
small.style.marginTop = previewEl ? "0.25em" : "1em";
small.style.marginBottom = "1.25em";
cardBody.insertBefore(small, cardBody.querySelector("#buttondiv"));


const downloadBtn = cardBody.querySelector("#buttondiv button");
if (downloadBtn) {
    downloadBtn.style.backgroundImage = "linear-gradient(45deg, #D47C92 40%, #d87880)";
    downloadBtn.style.borderRadius = "20px";
    downloadBtn.style.border = "none";
    downloadBtn.style.color = "#fff";
    downloadBtn.style.fontSize = "1.1rem";
    downloadBtn.style.padding = "0.75em 2em";
    downloadBtn.style.marginTop = "0";
    downloadBtn.style.boxShadow = "1px 10px 20px 0 rgba(0, 0, 0, .23)";
    downloadBtn.style.transition = "background-image 0.3s ease, transform 0.2s ease";

    downloadBtn.addEventListener("mouseenter", () => {
        downloadBtn.style.backgroundImage = "linear-gradient(45deg, #d87880 40%, #D47C92)";
        downloadBtn.style.transform = "scale(1.05)";
    });
    downloadBtn.addEventListener("mouseleave", () => {
        downloadBtn.style.backgroundImage = "linear-gradient(45deg, #D47C92 40%, #d87880)";
        downloadBtn.style.transform = "scale(1)";
    });
}


window.Download = () => {
    window.location.href = `./downloadFile?id=${id}`;
};

i also modified some css/custom to match my personalization, you can use it if you want, this adds the preview for images /videos shared

after enabling :

environment:
  - GOKAPI_ENABLE_HOTLINK_VIDEOS=true

in compose ( i don't know if it really needed)