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

{% extends "base.html" %} {% block content %}
<div class="page-header">
    <h1>Add New 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"
                required
            />
        </div>

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

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

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

        <div class="form-group">
            <label for="additional_files" class="form-label"
                >Additional 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> Save Asset
            </button>
            <a href="{{ url_for('index') }}" class="button button-secondary">
                <i class="fas fa-times"></i> Cancel
            </a>
        </div>
    </form>
</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
    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 %}