muistox/gallery/templates/admin/upload_photos.html

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