class Uploader {
    constructor(file, options) {
        this.file = file
        this.options = options || {}
        // Унікальний ID файлу
        this.fileId = file.name + '-' + file.size + '-' + file.lastModified
    }

    // Запитуємо у сервера, скільки байт вже завантажено
    async getUploadedBytes() {
        const response = await fetch('/status', {
            headers: {
                'X-File-Id': this.fileId,
            },
        })

        if (response.status !== 200) {
            throw new Error("Can't get uploaded bytes: " + response.statusText)
        }

        const text = await response.text()
        return +text // Перетворюємо рядок "1024" в число 1024
    }

    // Головний метод завантаження
    async upload() {
        // 1. Скільки ми вже завантажили?
        this.startByte = await this.getUploadedBytes()

        console.log(`Відновлюємо з ${this.startByte} байт`)

        if (this.startByte >= this.file.size) {
            console.log('Файл вже повністю завантажено!')
            return
        }

        // 2. Створюємо запит
        const xhr = new XMLHttpRequest()
        this.xhr = xhr

        xhr.open('POST', '/upload', true)

        // IDs для сервера
        xhr.setRequestHeader('X-File-Id', this.fileId)
        xhr.setRequestHeader('X-Start-Byte', this.startByte)

        // 3. Відстежуємо прогрес (Upload Events)
        xhr.upload.onprogress = (e) => {
            // e.loaded - скільки відправлено в ЦЬОМУ запиті
            // this.startByte - скільки вже БУЛО на сервері
            // totalLoaded - реальний прогрес
            const totalLoaded = this.startByte + e.loaded
            const totalSize = this.file.size // Важливо використовувати original file size

            const percent = Math.round((totalLoaded / totalSize) * 100)
            console.log(`Прогрес: ${percent}%`)

            // Викликаємо колбек, якщо передали
            if (this.options.onProgress) {
                this.options.onProgress(percent, totalLoaded, totalSize)
            }
        }

        // 4. Відправляємо тільки залишок!
        // Метод file.slice() працює миттєво і не копіює дані в пам'ять
        const chunk = this.file.slice(this.startByte)

        return new Promise((resolve, reject) => {
            xhr.onload = () => {
                if (xhr.status === 200) {
                    resolve('Success')
                } else {
                    reject(new Error('Upload failed: ' + xhr.statusText))
                }
            }

            xhr.onerror = () => reject(new Error('Network Error'))
            xhr.onabort = () => resolve('Aborted')

            xhr.send(chunk)
        })
    }

    stop() {
        if (this.xhr) {
            this.xhr.abort()
        }
    }
}

<input type="file" id="fileInput" />
<button id="uploadBtn">Upload</button>
<button id="stopBtn">Stop</button>
<div id="progress">0%</div>

<script>
    let uploader

    document.getElementById('uploadBtn').onclick = async () => {
        const file = document.getElementById('fileInput').files[0]
        if (!file) return

        uploader = new Uploader(file, {
            onProgress: (percent) => {
                document.getElementById('progress').innerText = percent + '%'
            },
        })

        try {
            await uploader.upload()
            console.log('Завантаження завершено!')
        } catch (err) {
            console.error('Помилка:', err)
            // Тут можна автоматично спробувати ще раз через 3 сек
            // setTimeout(() => uploader.upload(), 3000);
        }
    }

    document.getElementById('stopBtn').onclick = () => {
        if (uploader) uploader.stop()
    }
</script>