onTotalProgress callback not called on Firefox for Android

[FasettoAndrew]

Type of issue

• [x] Bug report

Uploader type

• [x] Traditional

onTotalProgress callback not called on Firefox for Android

#### Fine Uploader version 5.12.0 #### Browsers where the bug is reproducible Firefox on Android #### Operating systems where the bug is reproducible Firefox for Android version 52.0 Android version 6.0.1 #### Exact steps required to reproduce the issue 1. Add onTotalProgress event callback, with obvious UI change or console output 2. Upload a file #### All relevant Fine Uploader-related code that you have written onTotalProgress: function(totalUploadedBytes, totalBytes) {\r\n ", thisNamespace, "uploaderOnTotalProgress", "(totalUploadedBytes, totalBytes)\r\n #### Detailed explanation of the problem When using Firefox on Android devices, and setting the onTotalProgress callback to display a console output or perform a UI change, nothing is observed when uploading a file as the event is not called. If you open the stock android browser on the same device, you will observe that the event callback is called correctly, but not on Firefox for Android.

[rnicholus]

Are you seeing any progress bar(s)? For any uploads on Firefox Android?

[FasettoAndrew]

Hi,

No i'm not seeing any progress bar's for any uploads on Firefox Android. This is due to the fact that in our project we are using the onTotalProgress callback to display progress bar details, which is why it doesn't get shown.

The onProgress callback does get called for Firefox Android, as do the onUpload, onComplete, onAllComplete etc call backs.

The only issue I can observe is with the onTotalProgress callback.

[rnicholus]

I don't have access to this environment, so you'll need to take a closer look and let me know where the problem lies. Assuming a new qq.TotalProgress instance is created, something is preventing the passed in callback function from being invoked.

[FasettoAndrew]

Hi,

Below is the JavaScript code we use for creating the fine uploader instance. I have added console logs to each call back function.

var uploader = new qq.FineUploaderBasic({
        request: {
            endpoint: 'OurServerEndpoint'
        },
        chunking:
        {
            enabled: true,
            concurrent:
            {
                enabled: true
            },
            success:
            {
                endpoint: 'OurServerEndpoint'
            }
        },
        cors:
        {
            // all requests are expected to be cross-domain requests
            expected: true,

            // If you want cookies to be sent along with the request
            // NOTE: If we enable this, we must change the CORS server must NOT include wildcard Access-Control-Allow-Origin headers, 
            //       and you must also include the Access-Control-Allow-Credentials header
            //
            // sendCredentials: true
        },
        retry:
        {
            enableAuto: true
        },
        callbacks:
        {
            onAutoRetry: function(id, name, attemptNumber) {
                console.log("onAutoRetry called")
            },

            onCancel: function(id, name) {
                console.log("onCancel called")
            },

            onComplete: function(id, name, responseJSON, xhr) {
                console.log("onComplete called")
            },

            onAllComplete: function(succeeded, failed) {
                console.log("onAllComplete called")
            },

            onDelete: function(id) {
                console.log("onDelete called")
            },

            onDeleteComplete: function(id, xhr, isError) {
                console.log("onDeleteComplete called")
            },

            onError: function(id, name, errorReason, xhr) {
                console.log("onError called")
            },

            onManualRetry: function(id, name) {
                console.log("onManualRetry called")
            },

            onPasteReceived: function(blob) {
                console.log("onPasteReceived called")
            },

            onProgress: function(id, name, uploadedBytes, totalBytes) {
                console.log("onProgress called")
            },

            onResume: function(id, name, chunkData) {
                console.log("onResume called")
            },

            onSessionRequestComplete: function(response, success, xhrOrXdr) {
                console.log("onSessionRequestComplete called")
            },

            onStatusChange: function(id, oldStatus, newStatus) {
                console.log("onStatusChange called")
            },

            onSubmit: function(id, name) {
                console.log("onSubmit called")
            },

            onSubmitDelete: function(id) {
                console.log("onSubmitDelete called")
            },

            onSubmitted: function(id, name) {
                console.log("onSubmitted called")
            },

            onTotalProgress: function(totalUploadedBytes, totalBytes) {
                console.log("THIS OUTPUT IS FROM TOTAL PROGRESS");
            },

            onUpload: function(id, name) {
                console.log("onUpload called")
            },

            onUploadChunk: function(id, name, chunkData) {
                console.log("onUploadChunk called")
            },

            onUploadChunkSuccess: function(id, chunkData, responseJSON, xhr) {
                console.log("onUploadChunkSuccess called")
            },

            onValidate: function(data, buttonContainer) {
                console.log("onValidate called")
            },

            onValidateBatch: function(fileOrBlobDataArray, buttonContainer) {
                console.log("onValidateBatch called")
            },
        }
    });

The console.log output is shown in Firefox for desktop:

This is the console output from Firefox from Android: