alexei.dolgolyov
f61a0206d4
Lint & Test / test (push) Successful in 1m29s
Replace plain <input type="file"> with a styled drag-and-drop zone featuring hover/drag states, file info display, and remove button. Fix 10 review issues: add 401 handling to upload, remove non-null assertions, add missing i18n keys (common.remove, error.play_failed, error.download_failed), normalize close button glyphs to ✕, i18n the dropzone aria-label, replace silent error catches with toast notifications, use DataTransfer for cross-browser file assignment.
63 lines
3.9 KiB
HTML
63 lines
3.9 KiB
HTML
<div id="asset-upload-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="asset-upload-title">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 id="asset-upload-title" data-i18n="asset.upload">Upload Asset</h2>
|
|
<button class="modal-close-btn" onclick="closeAssetUploadModal()" data-i18n-aria-label="aria.close">✕</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="asset-upload-error" class="modal-error" style="display:none"></div>
|
|
|
|
<div class="form-group">
|
|
<div class="label-row">
|
|
<label for="asset-upload-name" data-i18n="asset.name">Name:</label>
|
|
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
|
</div>
|
|
<small class="input-hint" style="display:none" data-i18n="asset.name.hint">Display name for this asset.</small>
|
|
<input type="text" id="asset-upload-name" maxlength="100">
|
|
<div id="asset-upload-tags-container"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="label-row">
|
|
<label for="asset-upload-description" data-i18n="asset.description">Description:</label>
|
|
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
|
</div>
|
|
<small class="input-hint" style="display:none" data-i18n="asset.description.hint">Optional description for this asset.</small>
|
|
<input type="text" id="asset-upload-description" maxlength="500">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="label-row">
|
|
<label data-i18n="asset.file">File:</label>
|
|
<button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
|
|
</div>
|
|
<small class="input-hint" style="display:none" data-i18n="asset.file.hint">Select a file to upload (sound, image, video, or other).</small>
|
|
<input type="file" id="asset-upload-file" required hidden>
|
|
<div id="asset-upload-dropzone" class="file-dropzone" tabindex="0" role="button"
|
|
data-i18n-aria-label="asset.drop_or_browse">
|
|
<div class="file-dropzone-icon">
|
|
<svg class="icon" viewBox="0 0 24 24" style="width:32px;height:32px">
|
|
<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/>
|
|
<path d="M14 2v4a2 2 0 0 0 2 2h4"/>
|
|
<path d="M12 12v6"/><path d="m15 15-3-3-3 3"/>
|
|
</svg>
|
|
</div>
|
|
<div class="file-dropzone-text">
|
|
<span class="file-dropzone-label" data-i18n="asset.drop_or_browse">Drop file here or click to browse</span>
|
|
</div>
|
|
<div id="asset-upload-file-info" class="file-dropzone-info" style="display:none">
|
|
<span id="asset-upload-file-name" class="file-dropzone-filename"></span>
|
|
<span id="asset-upload-file-size" class="file-dropzone-filesize"></span>
|
|
<button type="button" class="file-dropzone-remove" id="asset-upload-file-remove"
|
|
title="Remove" data-i18n-title="common.remove">✕</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-icon btn-secondary" onclick="closeAssetUploadModal()" title="Cancel" data-i18n-title="settings.button.cancel" data-i18n-aria-label="aria.cancel">✕</button>
|
|
<button class="btn btn-icon btn-primary" onclick="uploadAsset()" title="Upload" data-i18n-title="asset.upload" data-i18n-aria-label="asset.upload">✓</button>
|
|
</div>
|
|
</div>
|
|
</div>
|