Upload progress in XmlHttpRequest ?

jhayar

Hi ,
would like to ask how can i get upload progress in pure QML using XmlHttpRequest ,

on javascript we have xmlhttprequest.upload.onprogress
but on QML , this is not exist

any ideas ?

jhayar

up, any ideas ?

lemons

@jhayar wrap it with a simple C++ class:

// Uploader.h
#ifndef UPLOADER_H
#define UPLOADER_H
#include <QNetworkAccessManager>
#include <QNetworkReply>
#include <QFile>
#include <QBuffer>

class Uploader : public QObject {
    Q_OBJECT
    Q_PROPERTY(float progress READ progress NOTIFY progressChanged)
public:
    explicit Uploader(QObject *parent = nullptr)
        : QObject(parent)
        , m_manager(new QNetworkAccessManager(this))
        , m_progress(0)
    {
    }

    Q_INVOKABLE void upload(const QUrl &fileUrl, const QUrl &destination) {
        QFile file(fileUrl.toLocalFile());
        if (!file.open(QIODevice::ReadOnly)) {
            // Error handling
            return;
        }

        QNetworkRequest request(destination);
        auto reply = m_manager->put(request, file.readAll());

        connect(reply, &QNetworkReply::uploadProgress, this, [=](qint64 bytesSent, qint64 bytesTotal) {
            if (bytesTotal > 0) {
                m_progress = static_cast<float>(bytesSent) / bytesTotal;
                emit progressChanged();
            }
        });
    }

    float progress() const {
        return m_progress;
    }

signals:
    void progressChanged();

private:
    QNetworkAccessManager *m_manager;
    float m_progress;
};
#endif // UPLOADER_H

// main.cpp
#include "Uploader.h"
// ...
QQmlApplicationEngine engine;
qmlRegisterType<Uploader>("Uploader", 1, 0, "Uploader");
// ..

// main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import Uploader 1.0

ApplicationWindow {
    id: window
    width: 640
    height: 640
    visible: true

    Uploader {
        id: uploader
    }

    ProgressBar {
        id: progressBar
        width: parent.width
        height: 10
        value: uploader.progress
    }

    Button {
        text: "Upload File"
        anchors.centerIn: parent
        onClicked: {
            uploader.upload("file://home/<username>/path/some.file",
                            "https://target.url/upload")
        }
    }
}