file.html (4980B)
1 {{template "_header" .}} 2 <h2>File: {{.Data.File.Filename}}</h2> 3 4 <div class="file-container"> 5 6 <div class="file-sidebar"> 7 8 <details open> 9 <summary>Tags</summary> 10 <ul> 11 {{range $k, $vs := .Data.File.Tags}} 12 <li> 13 <span class="file-tag-category">{{$k}}:</span><br> 14 {{range $i, $v := $vs}} 15 {{if $i}}<br> {{end}} 16 <form method="post" action="/file/{{$.Data.File.ID}}/tag/{{$k}}/{{$v}}/delete"><button class="text-button" type="submit">x</button></form> 17 <a href="/tag/{{$k}}/{{$v}}">{{$v}}</a> 18 {{end}} 19 </li> 20 {{else}} 21 <li>No tags yet</li> 22 {{end}} 23 </ul> 24 </details> 25 26 <details> 27 <summary>Add Tags</summary> 28 <form method="post"> 29 <input type="text" name="category" list="categories" placeholder="Category"><br> 30 <datalist id="categories">{{range .Data.Categories}}<option value="{{.}}">{{end}}</datalist> 31 <input type="text" name="value" placeholder="Value"><br> 32 <button class="text-button" type="submit">Add Tag</button> 33 </form> 34 </details> 35 36 <details> 37 <summary>Raw URL</summary> 38 <input id="raw-url" value="http://{{.IP}}:{{.Port}}/uploads/{{.Data.EscapedFilename}}"><br> 39 <button class="text-button" id="copy-btn">Copy</button><br> 40 <span id="copy-status"></span> 41 <script src="/static/copy-link.js" defer></script> 42 </details> 43 44 <details> 45 <summary>File Actions</summary> 46 47 <script src="/static/rename-file.js" defer></script> 48 <form id="renameForm-{{.Data.File.ID}}" method="post" action="/file/{{.Data.File.ID}}/rename"> 49 <input type="hidden" name="newfilename" value="{{.Data.File.Filename}}"> 50 <button type="button" class="text-button rename-button" data-file-id="{{.Data.File.ID}}" data-current-name="{{.Data.File.Filename}}">Rename File</button> 51 </form> 52 <br /> 53 <form method="post" action="/file/{{.Data.File.ID}}/delete"> 54 <button type="submit" onclick="return confirm('Are you sure you want to delete this file? This cannot be undone!')" class="text-button">Delete File</button> 55 </form> 56 </details> 57 </div> 58 59 <div class="file-content"> 60 61 {{if hasAnySuffix .Data.File.Filename ".jpg" ".jpeg" ".png" ".gif" ".webp"}} 62 <div id="imageContainer" class="media-container"> 63 <a href="/uploads/{{.Data.EscapedFilename}}" target="_blank"><img src="/uploads/{{.Data.EscapedFilename}}" id="imageViewer" class="file-content-image"></a><br> 64 </div> 65 <script src="/static/timestamps.js" defer></script> 66 {{else if hasAnySuffix .Data.File.Filename ".cbz"}} 67 <div class="cbz-preview"> 68 <a href="/cbz/{{.Data.File.ID}}"> 69 <img src="/uploads/thumbnails/{{.Data.File.Filename}}.jpg" class="file-content-image" alt="CBZ Preview"> 70 </a> 71 <div class="cbz-open-button"> 72 <a href="/cbz/{{.Data.File.ID}}" class="text-button" style="display: inline-block; padding: 10px 20px; margin-top: 10px;">📖 Open CBZ Viewer</a> 73 </div> 74 </div> 75 {{else if hasAnySuffix .Data.File.Filename ".mp4" ".webm" ".mov" ".m4v"}} 76 <div id="videoContainer" class="media-container"> 77 <video id="videoPlayer" controls loop muted width="600"> 78 <source src="/uploads/{{.Data.EscapedFilename}}"> 79 </video><br> 80 </div> 81 <script src="/static/timestamps.js" defer></script> 82 {{else if hasAnySuffix .Data.File.Filename ".txt" ".md"}} 83 <div id="text-viewer-container"> 84 <div> 85 <button onclick="toggleLineNumbers()" class="text-button">Line Numbers</button> 86 <button onclick="toggleFullscreen()" class="text-button">Fullscreen</button> 87 </div> 88 <pre id="text-viewer" data-filename="{{.Data.EscapedFilename}}">Loading...</pre> 89 </div> 90 <script src="/static/text-viewer.js"></script> 91 {{else}} 92 <a href="/uploads/{{.Data.EscapedFilename}}">Download file</a><br> 93 {{end}} 94 95 <div class="description-section"> 96 <h3>Description</h3> 97 98 <!-- Display Mode --> 99 <div id="description-display" data-original-description="{{.Data.File.Description}}"> 100 {{if .Data.File.Description}} 101 <div id="current-description" >{{.Data.File.Description}}</div> 102 {{else}} 103 <div id="no-description">No description set</div> 104 {{end}} 105 <button class="text-button" id="edit-description-btn" onclick="toggleDescriptionEdit()"> 106 {{if .Data.File.Description}}Edit Description{{else}}Add Description{{end}} 107 </button> 108 </div> 109 110 <!-- Edit Mode (initially hidden) --> 111 <div id="description-edit" style="display: none;"> 112 <form method="post"> 113 <input type="hidden" name="action" value="update_description"> 114 <div> 115 <textarea 116 id="description-textarea" 117 name="description" 118 rows="6" 119 maxlength="2048" 120 placeholder="Enter description..." 121 >{{.Data.File.Description}}</textarea> 122 </div> 123 <div style="margin-top: 8px; display: flex; align-items: center; gap: 10px;"> 124 <button class="text-button" type="submit">Save Description</button> 125 <button class="text-button" type="button" onclick="cancelDescriptionEdit()">Cancel</button> 126 </div> 127 </form> 128 </div> 129 </div> 130 131 <script src="/static/description.js" defer></script> 132 133 </div> 134 135 {{template "_footer"}}