git.zone/tsview
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(s3): add drag-and-drop and context-menu file uploads, inline text editing in preview, and increase preview width

Browse Source
This commit is contained in:
Jürgen Kunz
2026-01-27 15:51:19 +00:00
parent 81d7ff0722
commit 7cef6f89d9
9 changed files with 370 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
ts_web/elements/tsview-s3-columns.ts
View File

@@ -43,10 +43,25 @@ export class TsviewS3Columns extends DeesElement {
@state()
private accessor createDialogName: string = '';
@state()
private accessor dragOverColumnIndex: number = -1;
@state()
private accessor dragOverFolderPrefix: string | null = null;
@state()
private accessor uploading: boolean = false;
@state()
private accessor uploadProgress: { current: number; total: number } | null = null;
private resizing: { columnIndex: number; startX: number; startWidth: number } | null = null;
private readonly DEFAULT_COLUMN_WIDTH = 250;
private readonly MIN_COLUMN_WIDTH = 150;
private readonly MAX_COLUMN_WIDTH = 500;
private dragCounters: Map<number, number> = new Map();
private folderHoverTimer: ReturnType<typeof setTimeout> | null = null;
private fileInputElement: HTMLInputElement | null = null;
public static styles = [
cssManager.defaultStyles,
@@ -77,6 +92,7 @@ export class TsviewS3Columns extends DeesElement {
height: 100%;
flex-shrink: 0;
overflow: hidden;
position: relative;
}
.resize-handle {
@@ -183,6 +199,58 @@ export class TsviewS3Columns extends DeesElement {
color: #666;
}
.column.drag-over {
background: rgba(59, 130, 246, 0.08);
outline: 2px dashed rgba(59, 130, 246, 0.4);
outline-offset: -2px;
}
.column-item.folder.drag-target {
background: rgba(59, 130, 246, 0.2) !important;
outline: 1px solid rgba(59, 130, 246, 0.5);
}
.upload-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
z-index: 10;
border-radius: 4px;
}
.upload-overlay .upload-text {
color: #e0e0e0;
font-size: 13px;
}
.upload-overlay .upload-progress {
color: #888;
font-size: 11px;
}
.drag-hint {
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
background: rgba(59, 130, 246, 0.9);
color: white;
padding: 4px 12px;
border-radius: 4px;
font-size: 11px;
pointer-events: none;
white-space: nowrap;
z-index: 5;
}
.dialog-overlay {
position: fixed;
top: 0;
@@ -288,6 +356,13 @@ export class TsviewS3Columns extends DeesElement {
await this.loadInitialColumn();
}
disconnectedCallback() {
super.disconnectedCallback();
this.clearFolderHover();
this.dragCounters.clear();
if (this.fileInputElement) { this.fileInputElement.remove(); this.fileInputElement = null; }
}
updated(changedProperties: Map<string, unknown>) {
// Only reset columns when bucket changes or refresh is triggered
// Internal folder navigation is handled by selectFolder() which appends columns
@@ -457,6 +532,11 @@ export class TsviewS3Columns extends DeesElement {
iconName: 'lucide:filePlus',
action: async () => this.openCreateDialog('file', prefix),
},
{
name: 'Upload Files',
iconName: 'lucide:upload',
action: async () => this.triggerFileUpload(prefix),
},
{ divider: true },
{
name: 'Delete Folder',
@@ -535,6 +615,11 @@ export class TsviewS3Columns extends DeesElement {
iconName: 'lucide:filePlus',
action: async () => this.openCreateDialog('file', prefix),
},
{
name: 'Upload Files',
iconName: 'lucide:upload',
action: async () => this.triggerFileUpload(prefix),
},
]);
}
@@ -572,6 +657,145 @@ export class TsviewS3Columns extends DeesElement {
return defaults[ext] || '';
}
// --- File upload helpers ---
private ensureFileInput(): HTMLInputElement {
if (!this.fileInputElement) {
this.fileInputElement = document.createElement('input');
this.fileInputElement.type = 'file';
this.fileInputElement.multiple = true;
this.fileInputElement.style.display = 'none';
this.shadowRoot!.appendChild(this.fileInputElement);
}
return this.fileInputElement;
}
private triggerFileUpload(targetPrefix: string) {
const input = this.ensureFileInput();
input.value = '';
const handler = async () => {
input.removeEventListener('change', handler);
if (input.files && input.files.length > 0) {
await this.uploadFiles(Array.from(input.files), targetPrefix);
}
};
input.addEventListener('change', handler);
input.click();
}
private async uploadFiles(files: File[], targetPrefix: string) {
this.uploading = true;
this.uploadProgress = { current: 0, total: files.length };
for (let i = 0; i < files.length; i++) {
const file = files[i];
this.uploadProgress = { current: i + 1, total: files.length };
try {
const base64 = await this.readFileAsBase64(file);
const key = targetPrefix + file.name;
const contentType = file.type || this.getContentType(file.name.split('.').pop()?.toLowerCase() || '');
await apiService.putObject(this.bucketName, key, base64, contentType);
} catch (err) {
console.error(`Failed to upload ${file.name}:`, err);
}
}
this.uploading = false;
this.uploadProgress = null;
await this.refreshColumnByPrefix(targetPrefix);
}
private readFileAsBase64(file: File): Promise<string> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => {
const result = reader.result as string;
resolve(result.split(',')[1] || '');
};
reader.onerror = () => reject(reader.error);
reader.readAsDataURL(file);
});
}
private async refreshColumnByPrefix(prefix: string) {
const columnIndex = this.columns.findIndex(col => col.prefix === prefix);
if (columnIndex === -1) {
await this.loadInitialColumn();
return;
}
try {
const result = await apiService.listObjects(this.bucketName, prefix, '/');
this.columns = this.columns.map((col, i) =>
i === columnIndex ? { ...col, objects: result.objects, prefixes: result.prefixes } : col
);
} catch {
await this.loadInitialColumn();
}
}
// --- Drag-and-drop handlers ---
private handleColumnDragEnter(e: DragEvent, columnIndex: number) {
e.preventDefault();
e.stopPropagation();
const count = (this.dragCounters.get(columnIndex) || 0) + 1;
this.dragCounters.set(columnIndex, count);
this.dragOverColumnIndex = columnIndex;
}
private handleColumnDragOver(e: DragEvent) {
e.preventDefault();
e.stopPropagation();
if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
}
private handleColumnDragLeave(e: DragEvent, columnIndex: number) {
e.stopPropagation();
const count = (this.dragCounters.get(columnIndex) || 1) - 1;
this.dragCounters.set(columnIndex, count);
if (count <= 0) {
this.dragCounters.delete(columnIndex);
if (this.dragOverColumnIndex === columnIndex) this.dragOverColumnIndex = -1;
this.clearFolderHover();
}
}
private handleColumnDrop(e: DragEvent, columnIndex: number) {
e.preventDefault();
e.stopPropagation();
this.dragCounters.clear();
this.dragOverColumnIndex = -1;
const files = e.dataTransfer?.files;
if (!files || files.length === 0) return;
const targetPrefix = this.dragOverFolderPrefix ?? this.columns[columnIndex].prefix;
this.clearFolderHover();
this.uploadFiles(Array.from(files), targetPrefix);
}
private handleFolderDragEnter(e: DragEvent, folderPrefix: string) {
e.stopPropagation();
this.clearFolderHover();
this.folderHoverTimer = setTimeout(() => {
this.dragOverFolderPrefix = folderPrefix;
}, 500);
}
private handleFolderDragLeave(e: DragEvent, folderPrefix: string) {
e.stopPropagation();
if (this.dragOverFolderPrefix === folderPrefix) this.dragOverFolderPrefix = null;
if (this.folderHoverTimer) {
clearTimeout(this.folderHoverTimer);
this.folderHoverTimer = null;
}
}
private clearFolderHover() {
if (this.folderHoverTimer) { clearTimeout(this.folderHoverTimer); this.folderHoverTimer = null; }
this.dragOverFolderPrefix = null;
}
private async handleCreate() {
if (!this.createDialogName.trim()) return;
@@ -675,7 +899,14 @@ export class TsviewS3Columns extends DeesElement {
: this.bucketName;
return html`
<div class="column" style="width: ${column.width}px">
<div
class="column ${this.dragOverColumnIndex === index ? 'drag-over' : ''}"
style="width: ${column.width}px"
@dragenter=${(e: DragEvent) => this.handleColumnDragEnter(e, index)}
@dragover=${(e: DragEvent) => this.handleColumnDragOver(e)}
@dragleave=${(e: DragEvent) => this.handleColumnDragLeave(e, index)}
@drop=${(e: DragEvent) => this.handleColumnDrop(e, index)}
>
<div class="column-header" title=${column.prefix || this.bucketName}>
${headerName}
</div>
@@ -686,9 +917,11 @@ export class TsviewS3Columns extends DeesElement {
${column.prefixes.map(
(prefix) => html`
<div
class="column-item folder ${column.selectedItem === prefix ? 'selected' : ''}"
class="column-item folder ${column.selectedItem === prefix ? 'selected' : ''} ${this.dragOverFolderPrefix === prefix ? 'drag-target' : ''}"
@click=${() => this.selectFolder(index, prefix)}
@contextmenu=${(e: MouseEvent) => this.handleFolderContextMenu(e, index, prefix)}
@dragenter=${(e: DragEvent) => this.handleFolderDragEnter(e, prefix)}
@dragleave=${(e: DragEvent) => this.handleFolderDragLeave(e, prefix)}
>
<svg class="icon" viewBox="0 0 24 24" fill="currentColor">
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
@@ -715,6 +948,21 @@ export class TsviewS3Columns extends DeesElement {
`
)}
</div>
${this.dragOverColumnIndex === index ? html`
<div class="drag-hint">
${this.dragOverFolderPrefix
? `Drop to upload into ${getFileName(this.dragOverFolderPrefix)}`
: 'Drop to upload here'}
</div>
` : ''}
${this.uploading ? html`
<div class="upload-overlay">
<div class="upload-text">Uploading...</div>
${this.uploadProgress ? html`
<div class="upload-progress">${this.uploadProgress.current} / ${this.uploadProgress.total} files</div>
` : ''}
</div>
` : ''}
</div>
`;
}