fine-uploader icon indicating copy to clipboard operation
fine-uploader copied to clipboard

onTotalProgress callback not called on Firefox for Android

Open FasettoAndrew opened this issue 8 years ago • 4 comments

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.

FasettoAndrew avatar Apr 10 '17 08:04 FasettoAndrew

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

rnicholus avatar Apr 11 '17 02:04 rnicholus

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.

FasettoAndrew avatar Apr 11 '17 07:04 FasettoAndrew

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.

rnicholus avatar Apr 11 '17 13:04 rnicholus

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: image

This is the console output from Firefox from Android: image

FasettoAndrew avatar Apr 12 '17 10:04 FasettoAndrew