Feature Request : Upload Progress

[calumk]

I know this is referenced in a discussion on the Dart SDK already, but dont think there is a specific issue for it.

At the moment the lack of file upload progress is quite problematic - espeically for larger files 100mb+

Is this on the road-map?

[ganigeorgiev]

This is in my internal todo, but for now is a very low priority and at least for the near future I'm not planning working on it. For JS in the browser, you can manually send plain XHR request and use its upload prop. For the Dart SDK the issue is slightly more complicated since it depends how the file was loaded.

I'll keep the issue open for easier tracking, but if anyone want to pick it feel free to outline some of the planned implementation details (I believe this'll require changes mostly in the SDKs).

[calumk]

Thanks for the reply

For anyone looking to do this, I managed to get it to work (for multiple simultanious file uploads)

Look at the Records API, to see how to patch a record: https://pocketbase.io/docs/api-records/
i used nanoid() to generate a unique ID for each upload, to track the progress of each file.

Obviously sample below is just an exmaple, but might be helpful to others.

let filesArr = []

for (var i = 0; i < e.target.files.length; i++) {
        const formData = new FormData();
        formData.append("files", e.target.files[i])

        let _uploadID = nanoid()
        filesArr.push({_uploadID : _uploadID, name : e.target.files[i].name, progress : 0})

        let xhr = new XMLHttpRequest();
        xhr.upload._uploadID = _uploadID

        // listen for upload progress
        xhr.upload.onprogress = function(event) {
            let percent = Math.round(100 * event.loaded / event.total);
            filesArr.find(item => item._uploadID === this._uploadID).progress = percent
            console.log(`File ${this._uploadID} is ${percent} % uploaded...`)
        };

        // handle error
        xhr.upload.onerror = function() {
            console.log(`Error during the upload: ${xhr.status}.`);
        };

        // upload completed successfully
        xhr.onload = async function(event) {
            console.log('Upload completed successfully.');
        };

        xhr.open('PATCH', 'http://pocketbaseurl.com/api/collections/collectionIdOrName/records/recordId');
        xhr.setRequestHeader("Authorization", pb.authStore.token);
        xhr.send(formData);
        
    }

[NickMundel]

I tried the same with axios and it seems that I always only receive two responses one being when the file upload is at 50 bytes and later when it has finished. Have you found a work-around for this?

[fcastrovilli]

are you planning to increase this feature priority in the near future?

[RayyanNafees]

I tried the same with axios and it seems that I always only receive two responses one being when the file upload is at 50 bytes and later when it has finished. Have you found a work-around for this?

Have u tried with axios' onUploadProgress config ?