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

115
ts_web/elements/tsview-s3-preview.ts
View File

@@ -28,6 +28,9 @@ export class TsviewS3Preview extends DeesElement {
@state()
private accessor hasChanges: boolean = false;
@state()
private accessor editing: boolean = false;
@state()
private accessor contentType: string = '';
@@ -83,8 +86,12 @@ export class TsviewS3Preview extends DeesElement {
.preview-content {
flex: 1;
overflow: auto;
padding: 12px;
overflow: hidden;
}
.preview-content dees-preview {
width: 100%;
height: 100%;
}
.preview-content.code-editor {
@@ -96,25 +103,6 @@ export class TsviewS3Preview extends DeesElement {
height: 100%;
}
.preview-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 4px;
}
.preview-text {
font-family: 'Monaco', 'Menlo', monospace;
font-size: 12px;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-all;
color: #ccc;
background: rgba(0, 0, 0, 0.3);
padding: 12px;
border-radius: 6px;
}
.preview-actions {
padding: 12px;
border-top: 1px solid #333;
@@ -225,11 +213,6 @@ export class TsviewS3Preview extends DeesElement {
text-align: center;
}
.binary-preview {
text-align: center;
color: #888;
padding: 24px;
}
`,
];
@@ -243,6 +226,7 @@ export class TsviewS3Preview extends DeesElement {
this.error = '';
this.originalTextContent = '';
this.hasChanges = false;
this.editing = false;
}
}
}
@@ -253,6 +237,7 @@ export class TsviewS3Preview extends DeesElement {
this.loading = true;
this.error = '';
this.hasChanges = false;
this.editing = false;
try {
const result = await apiService.getObject(this.bucketName, this.objectKey);
@@ -395,12 +380,17 @@ export class TsviewS3Preview extends DeesElement {
this.hasChanges = newValue !== this.originalTextContent;
}
private handleEdit() {
this.editing = true;
}
private handleDiscard() {
const codeEditor = this.shadowRoot?.querySelector('dees-input-code') as any;
if (codeEditor) {
codeEditor.value = this.originalTextContent;
}
this.hasChanges = false;
this.editing = false;
}
private async handleSave() {
@@ -428,6 +418,7 @@ export class TsviewS3Preview extends DeesElement {
if (success) {
this.originalTextContent = currentContent;
this.hasChanges = false;
this.editing = false;
// Update the stored content as well
this.content = base64Content;
}
@@ -486,40 +477,60 @@ export class TsviewS3Preview extends DeesElement {
</div>
</div>
<div class="preview-content ${this.isText() ? 'code-editor' : ''}">
${this.isImage()
? html`<img class="preview-image" src="data:${this.contentType};base64,${this.content}" />`
<div class="preview-content ${this.editing ? 'code-editor' : ''}">
${this.editing
? html`
<dees-input-code
.value=${this.originalTextContent}
.language=${this.getLanguage()}
height="100%"
@content-change=${(e: CustomEvent) => this.handleContentChange(e)}
></dees-input-code>
`
: this.isText()
? html`
<dees-input-code
.value=${this.originalTextContent}
<dees-preview
.textContent=${this.originalTextContent}
.filename=${getFileName(this.objectKey)}
.language=${this.getLanguage()}
height="100%"
@content-change=${(e: CustomEvent) => this.handleContentChange(e)}
></dees-input-code>
.showToolbar=${true}
.showFilename=${false}
></dees-preview>
`
: html`
<div class="binary-preview">
<p>Binary file preview not available</p>
<p>Download to view</p>
</div>
`}
<dees-preview
.base64=${this.content}
.mimeType=${this.contentType}
.filename=${getFileName(this.objectKey)}
.showToolbar=${true}
.showFilename=${false}
></dees-preview>
`
}
</div>
<div class="preview-actions">
${this.hasChanges ? html`
<button class="action-btn secondary" @click=${this.handleDiscard}>Discard</button>
<button
class="action-btn primary"
@click=${this.handleSave}
?disabled=${this.saving}
>
${this.saving ? 'Saving...' : 'Save'}
</button>
` : html`
<button class="action-btn" @click=${this.handleDownload}>Download</button>
<button class="action-btn danger" @click=${this.handleDelete}>Delete</button>
`}
${this.editing
? html`
<button class="action-btn secondary" @click=${this.handleDiscard}>
${this.hasChanges ? 'Discard' : 'Cancel'}
</button>
<button
class="action-btn primary"
@click=${this.handleSave}
?disabled=${this.saving || !this.hasChanges}
>
${this.saving ? 'Saving...' : 'Save'}
</button>
`
: html`
${this.isText()
? html`<button class="action-btn" @click=${this.handleEdit}>Edit</button>`
: ''}
<button class="action-btn" @click=${this.handleDownload}>Download</button>
<button class="action-btn danger" @click=${this.handleDelete}>Delete</button>
`
}
</div>
</div>
`;