@uppy/companion: fix broken icons for webdav provider (#6069)

This fixes #6063.

It should be merged after #6059. Icon issue was fixed but This still
doesn’t fix the thumbnail preview issue, because OwnCloud and Nextcloud
don’t provide enough information about their thumbnail preview
endpoints. The docs aren’t very helpful: they mention how to make a
`PROPFIND` request to get extra metadata (such as has_preview)
[doc_ref](https://docs.nextcloud.com/server/stable/developer_manual/client_apis/WebDAV/basic.html#requesting-properties),
but I couldn’t get it to work with our webdav client.

Even if we did manage to obtain the thumbnail preview URL, it would be a
complicated capability to add, since we’d have to handle each WebDAV
server separately. That would lead to the same problems discussed here:
https://github.com/transloadit/uppy/pull/6059#issuecomment-3564642795 ,
so I don't think we need to spend anymore time on this.

**Before** 
<img width="1238" height="1014" alt="image"
src="https://github.com/user-attachments/assets/378c8b4b-640f-4e5d-9fef-48d255f729f9"
/>


**After** 
<img width="982" height="708" alt="image"
src="https://github.com/user-attachments/assets/7e20b119-c5a9-45dd-a0bd-7ddf95672137"
/>
This commit is contained in:
Prakash 2025-11-29 01:25:12 +05:30 committed by GitHub
parent ac12f35f5b
commit 4817585b66
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 28 additions and 2 deletions

View file

@ -0,0 +1,7 @@
---
"@uppy/provider-views": patch
"@uppy/companion": patch
"@uppy/core": patch
---
added icon to webdav provider, add css to truncate large file names

View file

@ -115,8 +115,17 @@ export default class WebdavProvider extends Provider {
// ignore invalid date from server // ignore invalid date from server
} }
// Determine icon based on type and MIME type
let icon = 'file'
if (isFolder) {
icon = 'folder'
} else if (item.mime?.startsWith('video/')) {
icon = 'video'
}
data.items.push({ data.items.push({
isFolder, isFolder,
icon,
id: requestPath, id: requestPath,
name: item.basename, name: item.basename,
modifiedDate, modifiedDate,

View file

@ -49,6 +49,12 @@
text-align: right; text-align: right;
} }
.uppy-truncate-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Inputs // Inputs
.uppy-c-textInput { .uppy-c-textInput {

View file

@ -75,7 +75,7 @@ export default function ListItem({
<ItemIcon itemIconString={file.data.icon} /> <ItemIcon itemIconString={file.data.icon} />
</div> </div>
{showTitles && file.data.name ? ( {showTitles && file.data.name ? (
<span>{file.data.name}</span> <span className="uppy-truncate-text">{file.data.name}</span>
) : ( ) : (
i18n('unnamed') i18n('unnamed')
)} )}
@ -89,7 +89,11 @@ export default function ListItem({
<div className="uppy-ProviderBrowserItem-iconWrap"> <div className="uppy-ProviderBrowserItem-iconWrap">
<ItemIcon itemIconString={file.data.icon} /> <ItemIcon itemIconString={file.data.icon} />
</div> </div>
{showTitles && (file.data.name ?? i18n('unnamed'))} {showTitles && (
<span className="uppy-truncate-text">
{file.data.name ?? i18n('unnamed')}
</span>
)}
</label> </label>
)} )}
</li> </li>