Минималистичный загрузчик файлов

Привет, чувак. Это я. То есть ты, только из будущего. Увы, тут у нас в 2023 никаких летающих машин и скейтов нет. И что самое смешное - передача файлов между девайсами до сих пор проблема. Надеюсь, ты это прочитаешь и создашь для себя временную ось получше.

Ну а пока я застрял здесь и вынужден как-то скинуть фотки со своего телефона, у которого почему-то отвалился MTP. В работе у меня - страница фидбэка для полностью статического сайта и я подумал - О! А ведь там загрузчик файлов будет очень кстати, заодно и фотки скину. И как только я начал его делать, в одном из списков рассылки Devuan вижу сообщение: как достали эти грёбаные телефоны, как скинуть файлы помогите пожалуйста.

Ну, думаю, раз не я такой один, значит оно того стоит. Когда-то я делал подобное, давным-давно, ещё во времена jQuery, но тогда был какой-то готовый компонент. А сейчас я ничего стороннего не хотел. Полез в MDN. Осмысленно всё скопипастил, и вот докладываю о результатах. Кое-что, конечно, повычистил, например, отслеживание файлов с одинаковыми имёнами, если они из разных каталогов, показ миниатюр, но это исключительно ради простоты изложения. Такие мелочи вы и сами легко сделаете.

Итак, базовый модуль загрузчика на Javascript. Модулем его назвать можно с большой натяжкой, так как весь Javascript и CSS у меня собирается в один HTML файл, упаковывается в gz, и дальше nginx раздаёт его налево и направо максимально быстро. Внутри HTML модуль Javascript становится анонимным без возможности экспорта чего-либо, поэтому приходится использовать старые недобрые методы.

(() => {

class FileUploader
{
    constructor(settings)
    {
        const default_settings = {
            url: '/',
            chunk_size: 512 * 1024,  // последний chunk может быть в полтора раза больше,
                                     // не забываем про лимиты request body на сервере
                                     // (у NGINX по умолчанию 1M)
            file_name_header: 'File-Name'  // что-нибудь стандартное типа Content-Disposition
                                           // было бы лучше, но его сложнее парсить
        };

        this.settings = Object.assign({}, default_settings, settings);
        this.upload_queue = [];
    }

    upload(file, params)
    /*
     * Добавляем файл в очередь, и если загрузка ещё не в процессе - тогда начинаем.
     */
    {
        const start_upload = this.upload_queue.length == 0;

        // Создаём file_item и добавляем в начало очереди
        const file_item = new FileItem(this, file, params);
        this.upload_queue.push(file_item);

        if(start_upload) {
            // если вызываем асинхронную функцию без await, получим promise,
            // либо fulfilled, либо pending. Но он нам всё равно не нужен.
            this._async_upload_files().then();
        }
    }

    progress(file, params, chunk_start_percentage, chunk_end_percentage, percentage)
    /*
     * Этот метод вызывается для отображения прогресс-бара.
     * Реализуем его в производном классе.
     */
    {
    }

    async upload_complete(file, params)
    /*
     * Этот метод вызывается по завершении загрузки.
     * Реализуем его в производном классе.
     */
    {
    }

    async _async_upload_files()
    {
        // обрабатываем очередь загрузки
        while(this.upload_queue.length != 0) {
            await this.upload_queue[0].upload();
            this.upload_queue.shift();
        }
    }
}

class FileItem
/*
 * Элемент очереди загрузки.
 */
{
    constructor(uploader, file, params)
    {
        this.uploader = uploader;
        this.file = file;
        this.params = params;
    }

    async upload()
    {
        var chunk_start = 0;
        var chunk_size;
        while(chunk_start < this.file.size) {
            const remaining_size = this.file.size - chunk_start;

            // загружаем кусками default_chunk_size, последний кусок допускается
            // в полтора раза больше, чем default_chunk_size
            if(remaining_size < 1.5 * this.uploader.settings.chunk_size) {
                chunk_size = remaining_size;
            } else {
                chunk_size = this.uploader.settings.chunk_size;
            }

            const chunk = this.file.slice(chunk_start, chunk_start + chunk_size);
            // XXX сохранять (start, end) в слайсе - грязный хак, а что делать?
            chunk.start = chunk_start;
            chunk.end = chunk_start + chunk_size;
            while(true) {
                try {
                    await this._upload_chunk(chunk);
                    break;
                } catch(error) {
                    console.log(`${this.file.name} upload error, retry in 5 seconds`);
                    await new Promise(resolve => setTimeout(resolve, 5000));
                }
            }

            chunk_start += chunk_size;
        }
        await this.uploader.upload_complete(this.file, this.params);
    }

    _upload_chunk(chunk)
    {
        // Эта функция использует non-awaitable XMLHttpRequest, поэтому не может быть async.
        // Но мы вызываем её с await, так что должны вернуть promise.

        const self = this;

        return new Promise((resolve, reject) => {

            const reader = new FileReader();
            const xhr = new XMLHttpRequest();

            xhr.upload.addEventListener(
                "progress",
                (e) => {
                    if(e.lengthComputable) {
                        const percentage = Math.round((e.loaded * 100) / e.total);
                        self._update_progress(chunk, percentage);
                    }
                },
                false
            );

            xhr.onreadystatechange = () => {
                if(xhr.readyState === xhr.DONE) {
                    if(xhr.status === 200) {
                        self._update_progress(chunk, 100);
                        resolve(xhr.response);
                    } else {
                        reject({
                            status: xhr.status,
                            statusText: xhr.statusText
                        });
                    }
                }
            };

            xhr.onerror = () => {
                reject({
                    status: xhr.status,
                    statusText: xhr.statusText
                });
            };

            xhr.open('POST', this.uploader.settings.url);

            const content_range = `bytes ${chunk.start}-${chunk.end - 1}/${this.file.size}`;
            xhr.setRequestHeader("Content-Range", content_range);
            xhr.setRequestHeader("Content-Type", "application/octet-stream");
            xhr.setRequestHeader(this.uploader.settings.file_name_header, this.file.name);

            reader.onload = (e) => {
                xhr.send(e.target.result);
            };

            reader.readAsArrayBuffer(chunk);
            self._update_progress(chunk, 0);
        });
    }

    _update_progress(chunk, percentage)
    {
        // считаем проценты и вызываем метод progress
        const chunk_start_percentage = chunk.start * 100 / this.file.size;
        const chunk_end_percentage = chunk.end * 100 / this.file.size;
        const upload_percentage = chunk_start_percentage + chunk.size * percentage / this.file.size;
        this.uploader.progress(
            this.file,
            this.params,
            chunk_start_percentage.toFixed(2),
            chunk_end_percentage.toFixed(2),
            upload_percentage.toFixed(2)
        );
    }
}

// типа экспортируем FileUploader
window.FileUploader = FileUploader;

})();

HTML и остальной Javascript:

<h3>Upload Files</h3>
<p>
    <button id="file-select">Choose Files</button> or drag and drop to the table below
</p>
<table id="file-list">
    <thead>
        <tr><th>File name</th><th>Size</th></tr>
    </thead>
    <tbody>
    </tbody>
</table>
<template id="file-row">
    <tr><td></td><td></td></tr>
</template>
<input type="file" id="files-input" multiple style="display:none">

<script>
    const upload_complete_color = 'rgb(0,192,0,0.2)';
    const chunk_complete_color = 'rgb(0,255,0,0.1)';

    class Uploader extends FileUploader
    {
        constructor()
        {
            super({url: '/api/feedback/upload'});

            this.elem = {
                file_select:  document.getElementById("file-select"),
                files_input:  document.getElementById("files-input"),
                file_list:    document.getElementById("file-list"),
                row_template: document.getElementById('file-row')
            };
            this.elem.tbody = this.elem.file_list.getElementsByTagName('tbody')[0];

            this.row_index = 0;

            this.set_event_handlers();
        }

        set_event_handlers()
        {
            const self = this;
            this.elem.file_select.addEventListener(
                "click",
                () => { self.elem.files_input.click(); },
                false
            );
            this.elem.files_input.addEventListener(
                "change",
                () => { self.handle_files(self.elem.files_input.files) },
                false
            );

            function consume_event(e)
            {
                e.stopPropagation();
                e.preventDefault();
            }

            function drop(e)
            {
                consume_event(e);
                self.handle_files(e.dataTransfer.files);
            }

            this.elem.file_list.addEventListener("dragenter", consume_event, false);
            this.elem.file_list.addEventListener("dragover", consume_event, false);
            this.elem.file_list.addEventListener("drop", drop, false);
        }

        progress(file, params, chunk_start_percentage, chunk_end_percentage, percentage)
        {
            params.progress_container.style.background = 'linear-gradient(to right, '
                + `${upload_complete_color} 0 ${percentage}%, `
                + `${chunk_complete_color} ${percentage}% ${chunk_end_percentage}%, `
                + `transparent ${chunk_end_percentage}%)`;
        }

        async upload_complete(file, params)
        {
            // красим зелёным всю строку
            params.progress_container.style.background = upload_complete_color;
            params.progress_container.nextSibling.style.background = upload_complete_color;
        }

        handle_files(files)
        /*
         * обрабатываем здесь файлы от drag'n'drop или диалога выбора
         */
        {
            for(const file of files) {
                const cols = this.append_file(file.size);
                this.upload(file, {progress_container: cols[0]});
            }
        }

        append_file(size)
        /*
         * Добавляем файл в таблицу, возвращаем список ячеек.
         */
        {
            const rows = this.elem.tbody.getElementsByTagName("tr");
            var row;
            if(this.row_index >= rows.length) {
                row = this.append_row();
            } else {
                row = rows[this.row_index];
            }
            this.row_index++;

            const cols = row.getElementsByTagName("td");
            cols[1].textContent = size.toString();
            return cols;
        }

        append_row()
        /*
         * Добавляем пустую строку к таблице.
         */
        {
            const tbody = this.elem.file_list.getElementsByTagName('tbody')[0];
            const row = this.elem.row_template.content.firstElementChild.cloneNode(true);
            tbody.appendChild(row);
            return row;
        }


    const uploader = new Uploader();

    // инициализируем таблицу - добавляем пять пустых строк
    for(let i = 0; i < 5; i++) uploader.append_row();

</script>

И, наконец, кусочек серверной части:

import os.path
import re
from starlette.responses import Response
import aiofiles.os

# Ничего этого в aiofiles нет. На момент написания, по крайней мере.
aiofiles.os.open = aiofiles.os.wrap(os.open)
aiofiles.os.close = aiofiles.os.wrap(os.close)
aiofiles.os.lseek = aiofiles.os.wrap(os.lseek)
aiofiles.os.write = aiofiles.os.wrap(os.write)

re_content_range = re.compile(r'bytes\s+(\d+)-(\d+)/(\d+)')

@expose(methods='POST')
async def upload(self, request):
    '''
    Ловим и записываем кусок файла.
    '''
    data = await request.body()
    filename = os.path.basename(request.headers['File-Name'])
    start, end, size = [int(n) for n in re_content_range.search(request.headers['Content-Range']).groups()]

    fd = await aiofiles.os.open(filename, os.O_CREAT | os.O_RDWR, mode=0o666)
    try:
        await aiofiles.os.lseek(fd, start, os.SEEK_SET)
        await aiofiles.os.write(fd, data)
    finally:
        await aiofiles.os.close(fd)
    return Response()

Что сказать в заключение? Мы бегаем по кругу. Процессоры мощнее, памяти больше, а загрузить все файлы за один раз мне не удалось. Браузер вылетал с OOM после 20-30 загруженных фоток, и это без показа миниатюр. Или я где-то накосячил?