{% 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 %}