web/satellite: Fix filebrowser bugs in Firefox

When attempting to upload a file on Firefox mobile, an error
"item.webkitRelativePath is undefined" prevents the client from
proceeding with the upload after the file is selected. This commit
contains a small check to protect against this issue.

Additionally, in Firefox (desktop, maybe mobile), links in the file
browser to enter subfolders, exit subfolders, or navigate out of folders
via breadcrumbs has default behavior of navigating the user to an empty
page that only displays "null". This changes adds `@click.prevent` in
some key locations to prevent this undesired behavior.

Change-Id: I83ee6fcc5a7d0ce9996dacc3f966e38a4936a9fe
This commit is contained in:
Moby von Briesen 2022-11-18 17:41:01 -05:00
parent f84111ee69
commit 1b67983130
4 changed files with 11 additions and 7 deletions

View File

@ -24,7 +24,7 @@
</div>
<div v-for="(path, idx) in crumbs" :key="idx" class="d-inline">
<span @click="redirectToCrumb(idx)">
<span @click.prevent="redirectToCrumb(idx)">
<a class="path" href="javascript:null">{{ path }}</a>
</span>

View File

@ -164,7 +164,7 @@
<tr v-if="path.length > 0">
<td class="px-3">
<span @click="onBack">
<span @click.prevent="onBack">
<a
id="navigate-back"
href="javascript:null"

View File

@ -23,7 +23,7 @@
/>
</svg>
<span @click="openBucket">
<span @click.prevent="openBucket">
<a
href="javascript:null"
class="file-name"

View File

@ -403,10 +403,14 @@ export const makeFilesModule = (): FilesModule => ({
const file = await new Promise(item.file.bind(item));
yield { path, file };
} else if (item instanceof File) {
let relativePath = item.webkitRelativePath
.split('/')
.slice(0, -1)
.join('/');
let relativePath = '';
// on Firefox mobile, item.webkitRelativePath might be `undefined`
if (item.webkitRelativePath) {
relativePath = item.webkitRelativePath
.split('/')
.slice(0, -1)
.join('/');
}
if (relativePath.length) {
relativePath += '/';