Personal-Digital-Asset-Manager/templates/edit_asset.html

{% extends "base.html" %} {% block content %}
<div class="page-header">
    <h1>Edit Digital Asset</h1>
</div>

<div class="form-container">
    <form method="POST" enctype="multipart/form-data" class="form">
        <div class="form-group">
            <label for="title" class="form-label">Title</label>
            <input
                type="text"
                id="title"
                name="title"
                class="form-input"
                value="{{ asset.title }}"
                required
            />
        </div>

        <div class="form-group">
            <label for="description" class="form-label">Description</label>
            <textarea id="description" name="description" class="form-input">
{{ asset.description }}</textarea
            >
        </div>

        <div class="form-group">
            <label class="form-label">Current Featured Image</label>
            <div class="current-image">
                <img
                    src="{{ url_for('static', filename='uploads/' + asset.featured_image) }}"
                    alt="{{ asset.title }}"
                />
            </div>
        </div>

        <div class="form-group">
            <label for="license_key">License Key</label>
            <input
                type="text"
                class="form-input"
                id="license_key"
                name="license_key"
                value="{{ asset.license_key or '' }}"
                placeholder="Enter the asset's license key"
            />
            <small class="form-text text-muted"
                >The license key that came with your purchased asset</small
            >
        </div>

        <div class="form-group">
            <label for="featured_image" class="form-label"
                >Update Featured Image</label
            >
            <div class="file-input-wrapper">
                <input
                    type="file"
                    id="featured_image"
                    name="featured_image"
                    class="file-input"
                    accept="image/*"
                />
                <label for="featured_image" class="file-input-label">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <span>Choose a new image...</span>
                </label>
                <div class="file-input-preview"></div>
            </div>
        </div>

        <div class="form-group">
            <label for="additional_files" class="form-label"
                >Add More Files</label
            >
            <div class="file-input-wrapper">
                <input
                    type="file"
                    id="additional_files"
                    name="additional_files"
                    class="file-input"
                    multiple
                />
                <label for="additional_files" class="file-input-label">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <span>Choose files...</span>
                </label>
                <div class="selected-files"></div>
            </div>
        </div>

        <div class="form-actions">
            <button type="submit" class="button button-primary">
                <i class="fas fa-save"></i> Update Asset
            </button>
            <a
                href="{{ url_for('asset_detail', id=asset.id) }}"
                class="button button-secondary"
            >
                <i class="fas fa-times"></i> Cancel
            </a>
        </div>
    </form>

    {% if asset.files %}
    <div class="current-files">
        <h3>Current Files</h3>
        <ul class="files-list">
            {% for file in asset.files %}
            <li class="file-item">
                <a
                    href="{{ url_for('static', filename='uploads/' + file.filename) }}"
                    target="_blank"
                    class="file-link"
                >
                    <i class="fas fa-file"></i>
                    {{ file.original_filename or file.filename }}
                </a>
                <form
                    method="POST"
                    action="{{ url_for('delete_asset_file', id=file.id) }}"
                    class="inline-form"
                >
                    <button
                        type="submit"
                        class="button button-small button-danger"
                        onclick="return confirm('Are you sure you want to delete this file?')"
                    >
                        <i class="fas fa-times"></i>
                    </button>
                </form>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}
</div>
{% endblock %} {% block scripts %}
<script>
    // Initialize Trumbowyg
    $("#description").trumbowyg({
        btns: [
            ["viewHTML"],
            ["undo", "redo"],
            ["formatting"],
            ["strong", "em", "del"],
            ["link"],
            ["insertImage"],
            ["justifyLeft", "justifyCenter", "justifyRight"],
            ["unorderedList", "orderedList"],
            ["horizontalRule"],
            ["removeformat"],
            ["fullscreen"],
        ],
        autogrow: true,
        resetCss: true,
        removeformatPasted: true,
        svgPath:
            "https://cdnjs.cloudflare.com/ajax/libs/Trumbowyg/2.27.3/ui/icons.svg",
    });

    // File input preview handling (keeping your existing code)
    document.addEventListener("DOMContentLoaded", function () {
        // Featured image preview
        const featuredInput = document.getElementById("featured_image");
        const featuredPreview = document.querySelector(".file-input-preview");

        featuredInput.addEventListener("change", function () {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    featuredPreview.innerHTML = `
                        <div class="preview-image">
                            <img src="${e.target.result}" alt="Preview">
                            <span class="filename">${file.name}</span>
                        </div>
                    `;
                };
                reader.readAsDataURL(file);
            }
        });

        // Additional files list
        const additionalInput = document.getElementById("additional_files");
        const selectedFiles = document.querySelector(".selected-files");

        additionalInput.addEventListener("change", function () {
            selectedFiles.innerHTML = "";
            Array.from(this.files).forEach((file) => {
                selectedFiles.innerHTML += `
                    <div class="selected-file">
                        <i class="fas fa-file"></i>
                        <span>${file.name}</span>
                    </div>
                `;
            });
        });
    });
</script>
{% endblock %}