Update upload template

gallery/templates/admin/photo_upload.html

@@ -0,0 +1,206 @@
+{% extends "admin/base_site.html" %}
+{% block content %}
+
+<!-- UIkit CSS -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.23.6/dist/css/uikit.min.css" />
+<!-- UIkit JS -->
+<script src="https://cdn.jsdelivr.net/npm/uikit@3.23.6/dist/js/uikit.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/uikit@3.23.6/dist/js/uikit-icons.min.js"></script>
+
+
+<div class="module">
+    <h2>Upload: {{ album.name }}</h2>
+    <div class="uk-section-xsmall">
+        
+        <div id="upload-drop-area" class="uk-placeholder uk-text-center uk-margin-small-bottom">
+            <span uk-icon="icon: cloud-upload"></span>
+            <span class="uk-text-middle">
+                Drop photos here or <span class="uk-link" id="file-picker">select</span>
+            </span>
+            <input id="file-input" type="file" accept=".jpg,.jpeg,.png" multiple hidden>
+        </div>
+
+        <ul id="file-list" class="uk-list uk-margin-small"></ul>
+        <div id="total-size" class="uk-text-bold uk-margin-small"></div>
+
+        <div id="progress-container" class="uk-margin-top" hidden>
+            <progress id="upload-progress" class="uk-progress" value="0" max="100"></progress>
+        </div>
+
+        <button class="uk-button uk-button-primary uk-margin-top" onclick="uploadFiles()">Upload</button>
+    </div>
+</div>
+
+<script>
+    let selectedFiles = [];
+    const fileStatuses = new Map();
+    const objectURLs = new Map();
+    const fileInput = document.getElementById('file-input');
+    const filePicker = document.getElementById('file-picker');
+    const fileList = document.getElementById('file-list');
+    const dropArea = document.getElementById('upload-drop-area');
+
+    const allowedTypes = ['image/jpeg', 'image/png'];
+    const maxFileSizeMB = 10;
+
+    filePicker.addEventListener('click', () => fileInput.click());
+
+    function renderFileList() {
+        fileList.innerHTML = '';
+        let totalSize = 0;
+
+        selectedFiles.forEach((file, index) => {
+            totalSize += file.size;
+
+            const li = document.createElement('li');
+            li.classList.add('uk-flex', 'uk-flex-middle', 'uk-flex-between', 'uk-margin-small');
+
+            const left = document.createElement('div');
+            left.classList.add('uk-flex', 'uk-flex-middle');
+
+            const img = document.createElement('img');
+            const objectURL = URL.createObjectURL(file);
+            objectURLs.set(file.name, objectURL);
+            img.src = objectURL;
+            img.style.width = '40px';
+            img.style.height = '40px';
+            img.style.objectFit = 'cover';
+            img.style.marginRight = '10px';
+
+            const nameSpan = document.createElement('span');
+            nameSpan.textContent = `${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)`;
+
+            left.appendChild(img);
+            left.appendChild(nameSpan);
+
+            const deleteBtn = document.createElement('button');
+            deleteBtn.classList.add('uk-button', 'uk-button-danger', 'uk-button-small');
+            deleteBtn.textContent = 'Poista';
+            deleteBtn.onclick = () => {
+                URL.revokeObjectURL(objectURLs.get(file.name));
+                objectURLs.delete(file.name);
+                selectedFiles.splice(index, 1);
+                renderFileList();
+            };
+
+            li.appendChild(left);
+            li.appendChild(deleteBtn);
+            fileList.appendChild(li);
+        });
+
+        if (selectedFiles.length > 0) {
+            const totalLi = document.createElement('li');
+            totalLi.classList.add('uk-text-small', 'uk-text-muted', 'uk-margin-top');
+            const totalMB = (totalSize / 1024 / 1024).toFixed(2);
+            totalLi.textContent = `Total size: ${totalMB} MB`;
+            fileList.appendChild(totalLi);
+        }
+
+        document.getElementById('total-size').textContent = '';
+    }
+
+    function uploadFiles() {
+        if (selectedFiles.length === 0) {
+            alert('Please select files to upload');
+            return;
+        }
+
+        const progressBar = document.getElementById('upload-progress');
+        document.getElementById('progress-container').hidden = false;
+
+        let uploaded = 0;
+        let total = selectedFiles.length;
+        let newFiles = [];
+
+        function updateProgress() {
+            progressBar.value = (uploaded / total) * 100;
+        }
+
+        const uploadPromises = selectedFiles.map(file => {
+            const formData = new FormData();
+            formData.append('photo', file);
+            formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
+
+            return fetch('', {
+                method: 'POST',
+                body: formData
+            }).then(response => {
+                if (response.ok) {
+                    fileStatuses.set(file.name, 'success');
+                } else {
+                    fileStatuses.set(file.name, 'error');
+                    newFiles.push(file);
+                }
+            }).catch(() => {
+                fileStatuses.set(file.name, 'error');
+                newFiles.push(file);
+            }).finally(() => {
+                uploaded++;
+                updateProgress();
+            });
+        });
+
+        Promise.allSettled(uploadPromises).then(() => {
+            selectedFiles = newFiles;
+            renderFileList();
+            UIkit.notification({
+                message: `Upload completed - ${total - newFiles.length} succeeded, ${newFiles.length} failed`,
+                status: newFiles.length > 0 ? 'warning' : 'success',
+                pos: 'top-center'
+            });
+        });
+    }
+
+    function handleFiles(files) {
+        for (let file of files) {
+            if (!allowedTypes.includes(file.type)) {
+                UIkit.notification({
+                    message: `Not allowed: ${file.name}`,
+                    status: 'danger',
+                    pos: 'top-center'
+                });
+                continue;
+            }
+
+            if (file.size / (1024 * 1024) > maxFileSizeMB) {
+                UIkit.notification({
+                    message: `Too large: ${file.name} > ${maxFileSizeMB}MB`,
+                    status: 'danger',
+                    pos: 'top-center'
+                });
+                continue;
+            }
+
+            if (!selectedFiles.find(f => f.name === file.name && f.size === file.size)) {
+                selectedFiles.push(file);
+            }
+        }
+        renderFileList();
+    }
+
+    dropArea.addEventListener('dragover', e => {
+        e.preventDefault();
+        dropArea.classList.add('uk-background-primary', 'uk-light');
+    });
+
+    dropArea.addEventListener('dragleave', () => {
+        dropArea.classList.remove('uk-background-primary', 'uk-light');
+    });
+
+    dropArea.addEventListener('drop', e => {
+        e.preventDefault();
+        dropArea.classList.remove('uk-background-primary', 'uk-light');
+        handleFiles(e.dataTransfer.files);
+    });
+
+    fileInput.addEventListener('change', () => {
+        handleFiles(fileInput.files);
+        fileInput.value = '';
+    });
+
+    window.addEventListener('beforeunload', () => {
+        objectURLs.forEach(url => URL.revokeObjectURL(url));
+    });
+</script>
+
+{% endblock %}