muistox/gallery/templates/admin/photo_upload.html

{% 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 %}