muistox/gallery/templates/admin/upload_photos.html

{% extends "admin/base_site.html" %}
{% block content %}
<div class="module">
    <h2>Upload Photos to {{ album.name }}</h2>

    <form id="upload-form" method="post" enctype="multipart/form-data">
        {% csrf_token %}

        <div class="form-row">
            <div id="js-drop" class="drop-area">
                <p><strong>Drag files here</strong> or click below to select</p>
                <input id="file-input" type="file" name="photo" multiple accept=".jpg,.jpeg">
            </div>
        </div>

        <ul id="file-list" class="messagelist"></ul>
        <p>Total size: <span id="total-size">0</span> MB</p>

        <progress id="js-progressbar" max="100" value="0" hidden></progress>

        <div class="submit-row">
            <button id="upload-button" class="default" type="button">Upload</button>
        </div>
    </form>
</div>

<style>
    .drop-area {
        border: 2px dashed #ddd;
        padding: 20px;
        text-align: center;
        background: #f9f9f9;
        cursor: pointer;
        margin-bottom: 10px;
        transition: background 0.3s, border-color 0.3s;
    }
    .drop-area.dragover {
        border-color: #007bff;
        background: #eef7ff;
    }
    #file-list {
        margin-top: 10px;
        list-style: none;
        padding: 0;
    }
    #file-list li {
        background: #f5f5f5;
        padding: 5px;
        margin-bottom: 5px;
        border-radius: 3px;
    }
    .success {
        color: green;
    }
    .error {
        color: red;
    }
</style>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        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;
        const maxSize = 10 * 1024 * 1024; // 10MB per file

        function updateFileList(newFiles) {
            // Suodatetaan vain JPEG-tiedostot ja poistetaan liian suuret
            filesToUpload = [...newFiles].filter(file => {
                if (!file.name.match(/\.jpe?g$/i)) {
                    alert(`File ${file.name} is not a JPG!`);
                    return false;
                }
                if (file.size > maxSize) {
                    alert(`File ${file.name} is too large! Max size: 10MB.`);
                    return false;
                }
                return true;
            });

            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('dragover');
        }));

        ['dragleave', 'drop'].forEach(eventName => dropArea.addEventListener(eventName, e => {
            e.preventDefault();
            dropArea.classList.remove('dragover');
        }));

        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;
            progressBar.value = 0;
            let uploadedSize = 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 = ((uploadedSize + event.loaded) / totalSize) * 100;
                    }
                };

                xhr.onload = () => {
                    const listItem = fileList.children[index];
                    if (xhr.status === 200) {
                        listItem.textContent += ' - Upload successful!';
                        listItem.classList.add('success');
                    } else {
                        listItem.textContent += ' - Upload failed!';
                        listItem.classList.add('error');
                    }
                    uploadedSize += file.size;
                };

                xhr.onerror = () => {
                    const listItem = fileList.children[index];
                    listItem.textContent += ' - Upload failed!';
                    listItem.classList.add('error');
                };

                xhr.send(formData);
            });
        });
    });
</script>
{% endblock %}