Add upload form and update Photo model

gallery/templates/admin/gallery/album/change_form.html

@@ -0,0 +1,7 @@
+{% extends "admin/change_form.html" %}
+{% block object-tools-items %}
+    {{ block.super }}
+    <li>
+        <a href="{% url 'admin:gallery_album_upload' album_id=original.id %}" class="button">Upload Photos</a>
+    </li>
+{% endblock %}

gallery/templates/admin/upload_photos.html

@@ -0,0 +1,114 @@
+{% extends "admin/base_site.html" %}
+{% block content %}
+<div class="container mt-3">
+    <h1>Upload Photos to {{ album.name }}</h1>
+
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/uikit/dist/css/uikit.min.css" />
+    <script src="https://cdn.jsdelivr.net/npm/uikit/dist/js/uikit.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/uikit/dist/js/uikit-icons.min.js"></script>
+
+    <form id="upload-form" method="post" enctype="multipart/form-data">
+        {% csrf_token %}
+
+        <div class="uk-margin">
+            <div id="js-drop" class="uk-placeholder uk-text-center uk-margin-medium-top">
+                <span uk-icon="icon: cloud-upload"></span>
+                <span class="uk-text-middle">Drag files here or</span>
+                <div uk-form-custom>
+                    <input id="file-input" type="file" name="photo" multiple accept=".jpg,.jpeg">
+                    <span class="uk-link">select them</span>
+                </div>
+            </div>
+
+            <ul id="file-list" class="uk-list uk-list-divider"></ul>
+            <p>Total size: <span id="total-size">0</span> MB</p>
+            <progress id="js-progressbar" class="uk-progress" value="0" max="100" hidden></progress>
+        </div>
+
+        <button id="upload-button" class="uk-button uk-button-primary" type="button">Upload</button>
+    </form>
+</div>
+
+<script>
+    const fileInput = document.getElementById('file-input');
+    const fileList = document.getElementById('file-list');
+    const totalSizeElement = document.getElementById('total-size');
+    const uploadButton = document.getElementById('upload-button');
+    const progressBar = document.getElementById('js-progressbar');
+    const dropArea = document.getElementById('js-drop');
+    let filesToUpload = [];
+    let totalSize = 0;
+
+    function updateFileList(newFiles) {
+        filesToUpload = [...newFiles].filter(file => file.name.match(/\.jpe?g$/i));
+        fileList.innerHTML = '';
+        totalSize = filesToUpload.reduce((acc, file) => acc + file.size, 0);
+
+        filesToUpload.forEach(file => {
+            const listItem = document.createElement('li');
+            listItem.textContent = `${file.name} (${(file.size / (1024 * 1024)).toFixed(2)} MB)`;
+            fileList.appendChild(listItem);
+        });
+        totalSizeElement.textContent = (totalSize / (1024 * 1024)).toFixed(2);
+    }
+
+    fileInput.addEventListener('change', event => updateFileList(event.target.files));
+
+    ['dragenter', 'dragover'].forEach(eventName => dropArea.addEventListener(eventName, e => {
+        e.preventDefault();
+        dropArea.classList.add('uk-active');
+    }));
+
+    ['dragleave', 'drop'].forEach(eventName => dropArea.addEventListener(eventName, e => {
+        e.preventDefault();
+        dropArea.classList.remove('uk-active');
+    }));
+
+    dropArea.addEventListener('drop', event => {
+        updateFileList(event.dataTransfer.files);
+    });
+
+    uploadButton.addEventListener('click', () => {
+        if (filesToUpload.length === 0) {
+            alert('Please select files to upload.');
+            return;
+        }
+
+        progressBar.hidden = false;
+        let uploaded = 0;
+
+        filesToUpload.forEach((file, index) => {
+            const xhr = new XMLHttpRequest();
+            const formData = new FormData();
+            formData.append('photo', file);
+            formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
+            xhr.open('POST', '', true);
+
+            xhr.upload.onprogress = event => {
+                if (event.lengthComputable) {
+                    progressBar.value = ((uploaded + event.loaded) / totalSize) * 100;
+                }
+            };
+
+            xhr.onload = () => {
+                const listItem = fileList.children[index];
+                if (xhr.status === 200) {
+                    listItem.textContent += ' - Upload successful!';
+                    listItem.classList.add('uk-text-success');
+                } else {
+                    listItem.textContent += ' - Upload failed!';
+                    listItem.classList.add('uk-text-danger');
+                }
+                uploaded += file.size;
+            };
+
+            xhr.onerror = () => {
+                fileList.children[index].textContent += ' - Upload failed!';
+                fileList.children[index].classList.add('uk-text-danger');
+            };
+
+            xhr.send(formData);
+        });
+    });
+</script>
+{% endblock %}