fix (filename): weird filenames

I've tried a lot of things to make the URL look nice but somehow there's
always a bug to handle all possible scenarios. Eg:

/test/test#test%20with a: space.txt

maybe one day, we can make the urls looks nicer but this would need a
significant revamp, until that happen, that will do.

tip: don't understimate the work it takes to do it nicely, I've tried to
do this 2 times quickly and everytime there's a edge case that make
things not working and breaking other odd stuff
This commit is contained in:
MickaelK
2024-12-10 21:23:23 +11:00
parent 5df9fad3b4
commit 003c4a9737
5 changed files with 8 additions and 6 deletions

View File

@ -119,7 +119,7 @@ class ComponentBreadcrumb extends HTMLElement {
return `
<div class="component_path-element n${idx}" data-path="${pathChunks.slice(0, idx+1).join("/") + "/"}">
<div class="li component_path-element-wrapper">
<a class="label" href="${forwardURLParams(toHref("/files") + link, ["share", "canary"])}" data-link>
<a class="label" href="${forwardURLParams(toHref("/files" + encodeURIComponent(link).replaceAll("%2F", "/")), ["share", "canary"])}" data-link>
${tmpl}
</a>
<div class="component_separator">

View File

@ -168,7 +168,7 @@ async function _createListOfFiles(path, currentName, fullpath) {
const currpath = path + whats[i] + "/";
const $li = createElement(`
<li data-path="${currpath}" title="${currpath}" class="no-select">
<a data-link href="${forwardURLParams(toHref("/files" + currpath), ["share", "canary"])}" draggable="false">
<a data-link href="${forwardURLParams(toHref("/files" + encodeURIComponent(currpath).replaceAll("%2F", "/")), ["share", "canary"])}" draggable="false">
<img class="component_icon" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgYXJpYS1oaWRkZW49InRydWUiCiAgIGZvY3VzYWJsZT0iZmFsc2UiCiAgIGNsYXNzPSJvY3RpY29uIG9jdGljb24tZmlsZS1kaXJlY3RvcnktZmlsbCIKICAgdmlld0JveD0iMCAwIDE2IDE2IgogICB3aWR0aD0iMTYiCiAgIGhlaWdodD0iMTYiCiAgIGZpbGw9ImN1cnJlbnRDb2xvciIKICAgc3R5bGU9ImRpc3BsYXk6IGlubGluZS1ibG9jazsgdXNlci1zZWxlY3Q6IG5vbmU7IHZlcnRpY2FsLWFsaWduOiB0ZXh0LWJvdHRvbTsgb3ZlcmZsb3c6IHZpc2libGU7IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxNTgiCiAgIHNvZGlwb2RpOmRvY25hbWU9ImdpdGh1YmZvbGRlci5zdmciCiAgIGlua3NjYXBlOnZlcnNpb249IjEuMi4yIChiMGE4NDg2NTQxLCAyMDIyLTEyLTAxKSIKICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiCiAgIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMTYyIiAvPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBpZD0ibmFtZWR2aWV3MTYwIgogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzAwMDAwMCIKICAgICBib3JkZXJvcGFjaXR5PSIwLjI1IgogICAgIGlua3NjYXBlOnNob3dwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwLjAiCiAgICAgaW5rc2NhcGU6cGFnZWNoZWNrZXJib2FyZD0iMCIKICAgICBpbmtzY2FwZTpkZXNrY29sb3I9IiNkMWQxZDEiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGlua3NjYXBlOnpvb209IjcxLjYyNSIKICAgICBpbmtzY2FwZTpjeD0iNy44MTE1MTgzIgogICAgIGlua3NjYXBlOmN5PSI4IgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMjAzNiIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMzk3IgogICAgIGlua3NjYXBlOndpbmRvdy14PSI3IgogICAgIGlua3NjYXBlOndpbmRvdy15PSIzNCIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzE1OCIgLz4KICA8cGF0aAogICAgIGQ9Ik0xLjc1IDFBMS43NSAxLjc1IDAgMCAwIDAgMi43NXYxMC41QzAgMTQuMjE2Ljc4NCAxNSAxLjc1IDE1aDEyLjVBMS43NSAxLjc1IDAgMCAwIDE2IDEzLjI1di04LjVBMS43NSAxLjc1IDAgMCAwIDE0LjI1IDNINy41YS4yNS4yNSAwIDAgMS0uMi0uMWwtLjktMS4yQzYuMDcgMS4yNiA1LjU1IDEgNSAxSDEuNzVaIgogICAgIGlkPSJwYXRoMTU2IgogICAgIHN0eWxlPSJmaWxsOiM1NzU5NWE7ZmlsbC1vcGFjaXR5OjEiIC8+Cjwvc3ZnPgo=" alt="directory">
<div class="ellipsis">${whats[i]}</div>
</a>

View File

@ -7,7 +7,8 @@ export function extname(str) {
}
export function join(baseURL, segment) {
return new URL(segment, baseURL).pathname;
const url = new URL(segment, baseURL);
return decodeURIComponent(url.pathname + url.hash);
}
export function forwardURLParams(url, allowed = []) {

View File

@ -329,7 +329,7 @@ function createLink(file, currentPath) {
let path = file.path;
if (!path) path = currentPath + file.name + (file.type === "directory" ? "/" : "");
let link = file.type === "directory" ? "files" + path : "view" + path;
link = link.replaceAll("#", "%23");
link = encodeURIComponent(link).replaceAll("%2F", "/");
return {
path,
link,

View File

@ -183,9 +183,10 @@ async function ctrlListShares(render, { load, remove, all, formLinks }) {
}
async function ctrlCreateShare(render, { save, formState }) {
const enc = (p) => encodeURIComponent(p).replaceAll("%2F", "/");
if (formState.path) formState.path = join(
location.origin + currentPath(),
formState.path,
location.origin + enc(currentPath()),
enc(formState.path),
);
let id = formState.id || randomString(7);
const $page = createElement(`