파일 프리뷰 추가

https://github.com/openNAMU/openNAMU/issues/2560

route/edit_upload.py

@@ -144,7 +144,7 @@ async def edit_upload():
                     ''' + await get_lang('max_file_size') + ''' : ''' + str(file_max) + '''MB
                     <hr class="main_hr">
                     <form method="post" enctype="multipart/form-data" accept-charset="utf8">
-                        <input multiple="multiple" type="file" name="f_data[]">
+                        <input multiple="multiple" type="file" name="f_data[]" id="file_input">
                         <hr class="main_hr">
                         <input placeholder="''' + await get_lang('file_name') + '''" name="f_name" value="''' + file_name + '''">
                         <hr class="main_hr">
@@ -157,6 +157,10 @@ async def edit_upload():
                         ''' + await captcha_get(conn) + '''
                         <button id="opennamu_save_button" type="submit">''' + await get_lang('save') + '''</button>
                     </form>
+                    <hr class="main_hr">
+                    <div id="preview"></div>
+                    <script defer src="/views/main_css/js/func/file_preview.js''' + cache_v() + '''"></script>
+                    <script>window.addEventListener("DOMContentLoaded", function() { opennamu_file_preview(); });</script>
                 ''',
                 menu = [['other', await get_lang('return')]]
             ))

views/main_css/js/func/file_preview.js

@@ -0,0 +1,55 @@
+function opennamu_file_preview() {
+    const input = document.getElementById('file_input');
+    const preview = document.getElementById('preview');
+    if (!input || !preview) return;
+
+    input.addEventListener('change', () => {
+        preview.innerHTML = '';
+
+        Array.from(input.files).forEach(file => {
+            const mime = file.type;
+
+            if (mime.startsWith('image/')) {
+                const img = document.createElement('img');
+
+                img.src = URL.createObjectURL(file);
+                img.onload = () => URL.revokeObjectURL(img.src);
+                img.style.maxWidth = '100%';
+
+                preview.appendChild(img);
+            } else if (mime === 'application/pdf') {
+                const embed = document.createElement('embed');
+
+                embed.src = URL.createObjectURL(file);
+                embed.type = 'application/pdf';
+                embed.style.width = '100px';
+                embed.style.height = '120px';
+                embed.style.marginRight = '0.5em';
+
+                preview.appendChild(embed);
+            } else if (mime.startsWith('text/') || mime === '') {
+                const reader = new FileReader();
+
+                reader.onload = () => {
+                    const pre = document.createElement('pre');
+
+                    pre.textContent = reader.result.slice(0, 200) + '...';
+                    pre.style.border = '1px solid #ccc';
+                    pre.style.padding = '0.5em';
+                    pre.style.maxWidth = '200px';
+                    pre.style.whiteSpace = 'pre-wrap';
+
+                    preview.appendChild(pre);
+                };
+
+                reader.readAsText(file);
+            }
+
+            const p = document.createElement('p');
+
+            p.textContent = `파일명: ${file.name}, 크기: ${Math.round(file.size / 1024)} KB`;
+
+            preview.appendChild(p);
+        });
+    });
+}