Enhance Article editor
This commit is contained in:
@@ -2,63 +2,474 @@
|
||||
{% block title %}{% if article %}Edit Article{% else %}New Article{% endif %}{% endblock %}
|
||||
{% block page_title %}{% if article %}Edit Article{% else %}New KB Article{% endif %}{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/tinymce@6/tinymce.min.js" referrerpolicy="origin"></script>
|
||||
<style>
|
||||
.tox .tox-toolbar,.tox .tox-toolbar__overflow,.tox .tox-toolbar-overlord{background:#f8fafc!important;}
|
||||
.tox .tox-edit-area__iframe{background:#fff!important;}
|
||||
.tox-tinymce{border:1px solid var(--border)!important;border-radius:0 0 8px 8px!important;box-shadow:none!important;}
|
||||
.tox .tox-menubar{background:#f8fafc!important;border-bottom:1px solid var(--border)!important;}
|
||||
.att-item{display:flex;align-items:center;gap:10px;padding:9px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;font-size:13px;}
|
||||
.att-item .att-icon{font-size:18px;flex-shrink:0;color:var(--accent);}
|
||||
.att-item .att-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||||
.att-item .att-size{font-size:11px;color:var(--muted);flex-shrink:0;font-family:'Space Mono',monospace;}
|
||||
#drop-zone{border:2px dashed var(--border2);border-radius:10px;padding:24px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;background:var(--surface2);}
|
||||
#drop-zone.dragover{border-color:var(--accent);background:#eff6ff;}
|
||||
#drop-zone i{font-size:28px;color:var(--muted2);display:block;margin-bottom:8px;}
|
||||
#drop-zone p{font-size:13px;color:var(--muted);margin:0;}
|
||||
#drop-zone strong{color:var(--accent);}
|
||||
#file-list{display:flex;flex-direction:column;gap:6px;margin-top:10px;}
|
||||
.pending-file{display:flex;align-items:center;gap:8px;padding:7px 12px;background:#fff;border:1px solid var(--border);border-radius:7px;font-size:13px;}
|
||||
.pending-file .pf-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||||
.pending-file .pf-size{font-size:11px;color:var(--muted);font-family:'Space Mono',monospace;}
|
||||
.pending-file .pf-remove{background:none;border:none;color:var(--danger);cursor:pointer;padding:0 4px;font-size:15px;line-height:1;}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row justify-content-center">
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-8">
|
||||
<div class="mb-3"><a href="{{ url_for('admin.kb_list') }}" style="font-size:13px;color:var(--accent3);">← Back to Knowledge Base</a></div>
|
||||
<div class="mb-3">
|
||||
<a href="{{ url_for('admin.kb_list') }}" style="font-size:13px;color:var(--accent);">
|
||||
<i class="bi bi-arrow-left me-1"></i>Back to Knowledge Base
|
||||
</a>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="bi bi-{% if article %}pencil{% else %}plus-circle{% endif %} me-2"></i>
|
||||
{% if article %}Edit: {{ article.title[:40] }}{% else %}Create New Article{% endif %}
|
||||
<i class="bi bi-{% if article %}pencil{% else %}file-earmark-plus{% endif %} me-2"></i>
|
||||
{% if article %}Edit: {{ article.title[:50] }}{% else %}Create New Article{% endif %}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="POST">
|
||||
<div class="row g-3">
|
||||
<div class="col-12">
|
||||
<label class="form-label">Title *</label>
|
||||
<input type="text" class="form-control" name="title" required
|
||||
value="{{ article.title if article else '' }}"
|
||||
placeholder="e.g. How to connect to the VPN"/>
|
||||
<form method="POST" enctype="multipart/form-data" id="kb-form">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Title *</label>
|
||||
<input type="text" class="form-control" name="title" required
|
||||
value="{{ article.title if article else '' }}"
|
||||
placeholder="e.g. How to connect to the corporate VPN"
|
||||
style="font-size:16px;font-weight:600;"/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Content *</label>
|
||||
<textarea name="body" id="kb-body" required>{{ article.body if article else '' }}</textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-paperclip me-1"></i>Attachments
|
||||
<span style="font-weight:400;color:var(--muted);">(PDF, DOCX, XLSX, ZIP, images, etc.)</span>
|
||||
</label>
|
||||
<div id="drop-zone" onclick="document.getElementById('att-input').click()">
|
||||
<i class="bi bi-cloud-arrow-up"></i>
|
||||
<p><strong>Click to browse</strong> or drag & drop files here</p>
|
||||
<p style="font-size:11px;margin-top:4px;">Max 16 MB per file</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Category</label>
|
||||
<select class="form-select" name="category">
|
||||
<option value="">— Select Category —</option>
|
||||
{% for cat in ['hardware','software','network','access','email','printer','phone','security','other'] %}
|
||||
<option value="{{ cat }}" {% if article and article.category == cat %}selected{% endif %}>
|
||||
{{ cat.replace('_',' ').title() }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label">Tags <span style="color:var(--muted);font-weight:400;">(comma-separated)</span></label>
|
||||
<input type="text" class="form-control" name="tags"
|
||||
value="{{ article.tags if article else '' }}"
|
||||
placeholder="vpn, remote, access"/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label class="form-label">Content *</label>
|
||||
<textarea class="form-control" name="body" rows="16" required
|
||||
placeholder="Write the article content here. You can use plain text with line breaks.">{{ article.body if article else '' }}</textarea>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label style="display:flex;align-items:center;gap:10px;cursor:pointer;">
|
||||
<input type="checkbox" name="is_published" style="accent-color:var(--accent3);width:16px;height:16px;"
|
||||
{% if not article or article.is_published %}checked{% endif %}/>
|
||||
<span style="font-size:14px;">Publish immediately (visible to all employees)</span>
|
||||
</label>
|
||||
<!-- Single picker — only used to trigger the OS dialog.
|
||||
Actual files are held in the JS stagedFiles DataTransfer object
|
||||
and injected into FormData on submit (fixes multi-file browser bug). -->
|
||||
<input type="file" id="att-input" multiple hidden
|
||||
accept=".png,.jpg,.jpeg,.gif,.webp,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.csv,.zip,.log"/>
|
||||
<div id="file-list"></div>
|
||||
<!-- Progress bar shown during fetch upload -->
|
||||
<div id="upload-progress" style="display:none;margin-top:10px;">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:4px;">
|
||||
<span>Uploading…</span><span id="upload-pct">0%</span>
|
||||
</div>
|
||||
<div style="height:5px;background:var(--border);border-radius:3px;">
|
||||
<div id="upload-bar" style="height:100%;background:var(--accent);border-radius:3px;width:0%;transition:width .2s;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2 mt-4">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
{% if article %}
|
||||
{% set existing = article.attachments.all() %}
|
||||
{% if existing %}
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Existing Attachments</label>
|
||||
<div style="display:flex;flex-direction:column;gap:6px;">
|
||||
{% for att in existing %}
|
||||
<div class="att-item">
|
||||
<i class="bi bi-{% if att.mime_type and 'image' in att.mime_type %}image{% elif att.mime_type and 'pdf' in att.mime_type %}file-earmark-pdf{% else %}file-earmark{% endif %} att-icon"></i>
|
||||
<span class="att-name">
|
||||
<a href="{{ url_for('admin.kb_serve_file', stored_name=att.stored_name) }}"
|
||||
target="_blank" style="color:var(--accent);">{{ att.filename }}</a>
|
||||
</span>
|
||||
<span class="att-size">{{ (att.file_size / 1024)|int }} KB</span>
|
||||
<form method="POST"
|
||||
action="{{ url_for('admin.kb_delete_attachment', article_id=article.id, att_id=att.id) }}"
|
||||
onsubmit="return confirm('Delete {{ att.filename }}?');" style="margin:0;">
|
||||
<button type="submit" class="btn btn-sm"
|
||||
style="background:none;border:none;color:var(--danger);padding:2px 6px;" title="Delete">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<div class="mb-4">
|
||||
<label style="display:flex;align-items:center;gap:10px;cursor:pointer;">
|
||||
<input type="checkbox" name="is_published"
|
||||
style="accent-color:var(--accent);width:16px;height:16px;"
|
||||
{% if not article or article.is_published %}checked{% endif %}/>
|
||||
<span style="font-size:14px;font-weight:500;">
|
||||
Publish immediately
|
||||
<span style="font-size:12px;color:var(--muted);font-weight:400;">(visible to all employees)</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="d-flex gap-2" style="border-top:1px solid var(--border);padding-top:16px;">
|
||||
<button type="submit" class="btn btn-primary" id="save-btn">
|
||||
<i class="bi bi-check2 me-2"></i>{% if article %}Save Changes{% else %}Publish Article{% endif %}
|
||||
</button>
|
||||
<a href="{{ url_for('admin.kb_list') }}" class="btn btn-secondary">Cancel</a>
|
||||
<button type="button" class="btn btn-secondary" onclick="saveDraft()">
|
||||
<i class="bi bi-floppy me-2"></i>Save as Draft
|
||||
</button>
|
||||
<a href="{{ url_for('admin.kb_list') }}" class="btn btn-secondary ms-auto">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="card mb-3">
|
||||
<div class="card-header"><i class="bi bi-sliders me-2"></i>Article Settings</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Category</label>
|
||||
<select class="form-select" name="category" form="kb-form">
|
||||
<option value="">— Select Category —</option>
|
||||
{% for cat in ['hardware','software','network','access','email','printer','phone','security','other'] %}
|
||||
<option value="{{ cat }}" {% if article and article.category == cat %}selected{% endif %}>
|
||||
{{ cat.replace('_',' ').title() }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-0">
|
||||
<label class="form-label">Tags <span style="font-weight:400;color:var(--muted);">(comma-separated)</span></label>
|
||||
<input type="text" class="form-control" name="tags" form="kb-form"
|
||||
value="{{ article.tags if article else '' }}" placeholder="vpn, remote, windows"/>
|
||||
<div style="font-size:11px;color:var(--muted);margin-top:5px;">Tags improve search and discoverability.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mb-3">
|
||||
<div class="card-header"><i class="bi bi-keyboard me-2"></i>Editor Tips</div>
|
||||
<div class="card-body" style="font-size:13px;color:var(--text2);">
|
||||
<div style="display:flex;flex-direction:column;gap:8px;">
|
||||
<div><kbd style="background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-size:11px;">Ctrl+B</kbd> Bold</div>
|
||||
<div><kbd style="background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-size:11px;">Ctrl+I</kbd> Italic</div>
|
||||
<div><kbd style="background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-size:11px;">Ctrl+K</kbd> Insert link</div>
|
||||
<div><kbd style="background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-size:11px;">Ctrl+Z</kbd> Undo</div>
|
||||
<div style="color:var(--muted);">Use <strong>Insert → Table</strong> for tables</div>
|
||||
<div style="color:var(--muted);">Drag & drop images directly into the editor</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if article %}
|
||||
<div class="card">
|
||||
<div class="card-header"><i class="bi bi-info-circle me-2"></i>Article Info</div>
|
||||
<div class="card-body" style="font-size:13px;">
|
||||
<div style="display:flex;flex-direction:column;gap:8px;color:var(--text2);">
|
||||
<div style="display:flex;justify-content:space-between;">
|
||||
<span style="color:var(--muted);">Created</span><span>{{ article.created_at.strftime('%b %d, %Y') }}</span>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:space-between;">
|
||||
<span style="color:var(--muted);">Last updated</span><span>{{ article.updated_at.strftime('%b %d, %Y') }}</span>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:space-between;">
|
||||
<span style="color:var(--muted);">Views</span><span>{{ article.view_count }}</span>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:space-between;">
|
||||
<span style="color:var(--muted);">Author</span><span>{{ article.author.full_name if article.author else '—' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3" style="border-top:1px solid var(--border);">
|
||||
<a href="{{ url_for('tickets.kb_article', article_id=article.id) }}" target="_blank" class="btn btn-secondary btn-sm w-100">
|
||||
<i class="bi bi-eye me-2"></i>Preview Article
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
tinymce.init({
|
||||
selector: '#kb-body',
|
||||
height: 520,
|
||||
menubar: true,
|
||||
branding: false,
|
||||
resize: true,
|
||||
plugins: [
|
||||
'advlist','autolink','lists','link','image','charmap',
|
||||
'preview','anchor','searchreplace','visualblocks','code',
|
||||
'fullscreen','insertdatetime','media','table','wordcount',
|
||||
'emoticons','codesample','help',
|
||||
],
|
||||
toolbar:
|
||||
'undo redo | styles | ' +
|
||||
'bold italic underline strikethrough | forecolor backcolor | ' +
|
||||
'alignleft aligncenter alignright alignjustify | ' +
|
||||
'bullist numlist outdent indent | ' +
|
||||
'table image media link anchor | ' +
|
||||
'codesample blockquote hr | ' +
|
||||
'removeformat | fullscreen code | help',
|
||||
style_formats: [
|
||||
{ title: 'Headings', items: [
|
||||
{ title: 'Heading 1', format: 'h1' },
|
||||
{ title: 'Heading 2', format: 'h2' },
|
||||
{ title: 'Heading 3', format: 'h3' },
|
||||
]},
|
||||
{ title: 'Inline', items: [
|
||||
{ title: 'Bold', format: 'bold' },
|
||||
{ title: 'Italic', format: 'italic' },
|
||||
{ title: 'Underline', format: 'underline' },
|
||||
{ title: 'Code', inline: 'code' },
|
||||
]},
|
||||
{ title: 'Callout', items: [
|
||||
{ title: 'Info box', block: 'div', classes: 'callout-info', wrapper: true },
|
||||
{ title: 'Warning box', block: 'div', classes: 'callout-warning', wrapper: true },
|
||||
{ title: 'Tip box', block: 'div', classes: 'callout-tip', wrapper: true },
|
||||
]},
|
||||
],
|
||||
content_style: `
|
||||
body { font-family: 'DM Sans',system-ui,sans-serif; font-size:14px; line-height:1.75; color:#0f172a; padding:16px 20px; max-width:860px; margin:0 auto; }
|
||||
h1,h2,h3,h4 { font-weight:700; margin:1.5em 0 .5em; color:#0f172a; }
|
||||
h1{font-size:1.6em;} h2{font-size:1.35em;} h3{font-size:1.15em;}
|
||||
p { margin:0 0 1em; }
|
||||
a { color:#2563eb; }
|
||||
code { background:#f1f5f9; border:1px solid #e2e8f0; border-radius:4px; padding:1px 5px; font-size:.88em; }
|
||||
pre { background:#1e293b; color:#e2e8f0; padding:14px 18px; border-radius:8px; overflow-x:auto; }
|
||||
pre code { background:none; border:none; padding:0; color:inherit; }
|
||||
table { border-collapse:collapse; width:100%; margin:1em 0; }
|
||||
table th { background:#f1f5f9; font-weight:600; }
|
||||
table th, table td { border:1px solid #e2e8f0; padding:8px 12px; font-size:13px; }
|
||||
table tr:nth-child(even) td { background:#f8fafc; }
|
||||
img { max-width:100%; height:auto; border-radius:6px; }
|
||||
blockquote { border-left:4px solid #2563eb; margin:1em 0; padding:10px 16px; background:#eff6ff; border-radius:0 6px 6px 0; color:#1e40af; }
|
||||
.callout-info { background:#eff6ff; border:1px solid #bfdbfe; border-radius:8px; padding:14px 16px; margin:1em 0; }
|
||||
.callout-warning { background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:14px 16px; margin:1em 0; }
|
||||
.callout-tip { background:#ecfdf5; border:1px solid #a7f3d0; border-radius:8px; padding:14px 16px; margin:1em 0; }
|
||||
hr { border:none; border-top:1px solid #e2e8f0; margin:2em 0; }
|
||||
`,
|
||||
images_upload_url: '/admin/kb/upload-image',
|
||||
images_upload_handler: async (blobInfo, progress) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', '/admin/kb/upload-image');
|
||||
xhr.upload.onprogress = (e) => { if (e.lengthComputable) progress(e.loaded / e.total * 100); };
|
||||
xhr.onload = () => {
|
||||
if (xhr.status !== 200) { reject({ message: `Upload failed (HTTP ${xhr.status})`, remove: true }); return; }
|
||||
try {
|
||||
const json = JSON.parse(xhr.responseText);
|
||||
if (json.location) resolve(json.location);
|
||||
else reject({ message: json.error || 'Upload failed', remove: true });
|
||||
} catch { reject({ message: 'Invalid server response', remove: true }); }
|
||||
};
|
||||
xhr.onerror = () => reject({ message: 'Network error during upload', remove: true });
|
||||
const fd = new FormData();
|
||||
fd.append('file', blobInfo.blob(), blobInfo.filename());
|
||||
xhr.send(fd);
|
||||
});
|
||||
},
|
||||
paste_data_images: true,
|
||||
image_advtab: true,
|
||||
image_caption: true,
|
||||
table_default_attributes: { border: '0' },
|
||||
table_default_styles: { 'border-collapse': 'collapse', width: '100%' },
|
||||
table_responsive_width: true,
|
||||
link_default_target: '_blank',
|
||||
link_assume_external_targets: true,
|
||||
codesample_languages: [
|
||||
{ text: 'HTML/XML', value: 'markup' },
|
||||
{ text: 'JavaScript', value: 'javascript' },
|
||||
{ text: 'CSS', value: 'css' },
|
||||
{ text: 'Python', value: 'python' },
|
||||
{ text: 'Bash/Shell', value: 'bash' },
|
||||
{ text: 'SQL', value: 'sql' },
|
||||
{ text: 'PowerShell', value: 'powershell' },
|
||||
{ text: 'Plain text', value: 'none' },
|
||||
],
|
||||
setup: (editor) => { editor.on('change', () => editor.save()); },
|
||||
});
|
||||
|
||||
function saveDraft() {
|
||||
tinymce.triggerSave();
|
||||
// Temporarily uncheck is_published, submit, then immediately restore so the
|
||||
// checkbox state is not left unchecked if the user stays on the page.
|
||||
const cb = document.querySelector('input[name="is_published"]');
|
||||
const wasChecked = cb ? cb.checked : false;
|
||||
if (cb) cb.checked = false;
|
||||
// Use a hidden input to explicitly send is_published=0 so the backend
|
||||
// receives a definitive falsy value regardless of checkbox behaviour.
|
||||
let hidden = document.getElementById('_draft_flag');
|
||||
if (!hidden) {
|
||||
hidden = document.createElement('input');
|
||||
hidden.type = 'hidden';
|
||||
hidden.id = '_draft_flag';
|
||||
hidden.name = '_save_as_draft';
|
||||
hidden.value = '1';
|
||||
document.getElementById('kb-form').appendChild(hidden);
|
||||
}
|
||||
document.getElementById('kb-form').submit();
|
||||
// Restore (runs if submit is cancelled by browser validation)
|
||||
if (cb) cb.checked = wasChecked;
|
||||
}
|
||||
|
||||
// ── File staging ─────────────────────────────────────────────────────────────
|
||||
// Root cause of the multi-file bug: assigning to input.files via DataTransfer
|
||||
// is unreliable across browsers (read-only in Firefox/Safari).
|
||||
// Fix: keep ALL staged files only in the DataTransfer object; on submit build
|
||||
// a FormData manually and POST via fetch — bypassing input.files entirely.
|
||||
|
||||
const dropZone = document.getElementById('drop-zone');
|
||||
const attInput = document.getElementById('att-input');
|
||||
const fileList = document.getElementById('file-list');
|
||||
let stagedFiles = new DataTransfer();
|
||||
|
||||
function renderFileList() {
|
||||
fileList.innerHTML = '';
|
||||
const files = stagedFiles.files;
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const f = files[i];
|
||||
const div = document.createElement('div');
|
||||
div.className = 'pending-file';
|
||||
div.innerHTML = `<i class="bi bi-${getFileIcon(f.name)}" style="color:var(--accent);font-size:16px;flex-shrink:0;"></i>
|
||||
<span class="pf-name">${escHtml(f.name)}</span>
|
||||
<span class="pf-size">${formatSize(f.size)}</span>
|
||||
<button type="button" class="pf-remove" onclick="removeFile(${i})" title="Remove">×</button>`;
|
||||
fileList.appendChild(div);
|
||||
}
|
||||
}
|
||||
|
||||
function removeFile(idx) {
|
||||
const newDt = new DataTransfer();
|
||||
const files = stagedFiles.files;
|
||||
for (let i = 0; i < files.length; i++) { if (i !== idx) newDt.items.add(files[i]); }
|
||||
stagedFiles = newDt;
|
||||
renderFileList();
|
||||
}
|
||||
|
||||
function addFiles(newFiles) {
|
||||
for (const f of newFiles) {
|
||||
if (f.size > 16 * 1024 * 1024) { alert(`"${f.name}" exceeds the 16 MB limit and was skipped.`); continue; }
|
||||
stagedFiles.items.add(f);
|
||||
}
|
||||
// Reset the picker so the same file can be picked again if needed
|
||||
attInput.value = '';
|
||||
renderFileList();
|
||||
}
|
||||
|
||||
attInput.addEventListener('change', () => addFiles(attInput.files));
|
||||
dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('dragover'); });
|
||||
dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));
|
||||
dropZone.addEventListener('drop', (e) => { e.preventDefault(); dropZone.classList.remove('dragover'); addFiles(e.dataTransfer.files); });
|
||||
|
||||
// ── Form submit via fetch (fixes multi-file upload) ───────────────────────────
|
||||
document.getElementById('kb-form').addEventListener('submit', async function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Sync TinyMCE content into the hidden textarea before building FormData
|
||||
tinymce.triggerSave();
|
||||
|
||||
const form = this;
|
||||
const saveBtn = document.getElementById('save-btn');
|
||||
const origTxt = saveBtn.innerHTML;
|
||||
saveBtn.disabled = true;
|
||||
saveBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Saving…';
|
||||
|
||||
// Build FormData from the form fields
|
||||
const fd = new FormData(form);
|
||||
|
||||
// Append every staged file under the key "attachments"
|
||||
// This is the reliable path — FormData.append() bypasses input.files entirely
|
||||
const staged = stagedFiles.files;
|
||||
for (let i = 0; i < staged.length; i++) {
|
||||
fd.append('attachments', staged[i], staged[i].name);
|
||||
}
|
||||
|
||||
// Show progress bar
|
||||
const progressWrap = document.getElementById('upload-progress');
|
||||
const progressBar = document.getElementById('upload-bar');
|
||||
const progressPct = document.getElementById('upload-pct');
|
||||
if (staged.length > 0) progressWrap.style.display = 'block';
|
||||
|
||||
try {
|
||||
await new Promise((resolve, reject) => {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', form.action || window.location.href);
|
||||
|
||||
xhr.upload.onprogress = (ev) => {
|
||||
if (ev.lengthComputable) {
|
||||
const pct = Math.round(ev.loaded / ev.total * 100);
|
||||
progressBar.style.width = pct + '%';
|
||||
progressPct.textContent = pct + '%';
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onload = () => {
|
||||
if (xhr.status >= 200 && xhr.status < 400) {
|
||||
try {
|
||||
// Backend returns {redirect: "/admin/kb"} for fetch submissions
|
||||
const json = JSON.parse(xhr.responseText);
|
||||
if (json.redirect) { resolve(json.redirect); return; }
|
||||
} catch (_) { /* not JSON — fall through */ }
|
||||
// Fallback: use the final response URL (after any server-side redirect)
|
||||
resolve(xhr.responseURL || window.location.href);
|
||||
} else {
|
||||
reject(new Error(`Server returned ${xhr.status}`));
|
||||
}
|
||||
};
|
||||
xhr.onerror = () => reject(new Error('Network error'));
|
||||
|
||||
xhr.send(fd);
|
||||
|
||||
// Store responseURL for redirect after onload
|
||||
xhr._resolve = resolve;
|
||||
}).then((redirectUrl) => {
|
||||
window.location.href = redirectUrl;
|
||||
});
|
||||
} catch (err) {
|
||||
progressWrap.style.display = 'none';
|
||||
saveBtn.disabled = false;
|
||||
saveBtn.innerHTML = origTxt;
|
||||
alert('Upload failed: ' + err.message + '\nPlease try again.');
|
||||
}
|
||||
});
|
||||
|
||||
// saveDraft submits via the same fetch path — just flips the checkbox first
|
||||
function saveDraft() {
|
||||
tinymce.triggerSave();
|
||||
const cb = document.querySelector('input[name="is_published"]');
|
||||
const wasChecked = cb ? cb.checked : false;
|
||||
if (cb) cb.checked = false;
|
||||
let hidden = document.getElementById('_draft_flag');
|
||||
if (!hidden) {
|
||||
hidden = document.createElement('input');
|
||||
hidden.type = 'hidden';
|
||||
hidden.id = '_draft_flag';
|
||||
hidden.name = '_save_as_draft';
|
||||
hidden.value = '1';
|
||||
document.getElementById('kb-form').appendChild(hidden);
|
||||
}
|
||||
// Trigger the fetch-based submit handler
|
||||
document.getElementById('kb-form').dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
|
||||
if (cb) cb.checked = wasChecked;
|
||||
}
|
||||
|
||||
function formatSize(b) { if(b<1024) return b+' B'; if(b<1048576) return (b/1024).toFixed(1)+' KB'; return (b/1048576).toFixed(1)+' MB'; }
|
||||
function escHtml(s) { return s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'); }
|
||||
function getFileIcon(n) {
|
||||
const e = n.split('.').pop().toLowerCase();
|
||||
return {pdf:'file-earmark-pdf',png:'image',jpg:'image',jpeg:'image',gif:'image',webp:'image',
|
||||
doc:'file-earmark-word',docx:'file-earmark-word',xls:'file-earmark-excel',xlsx:'file-earmark-excel',
|
||||
ppt:'file-earmark-ppt',pptx:'file-earmark-ppt',zip:'file-earmark-zip',
|
||||
csv:'file-earmark-spreadsheet',txt:'file-earmark-text',log:'file-earmark-text'}[e] || 'file-earmark';
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user