amazon-s3fine-uploader

FineUploader onProgress not firing correctly when uploading directly to S3 using a PreSignedUrl


using qq.s3.FineUploaderBasic to upload files from the client directly to a PreSignedUrl.

files are uploaded to S3 but the progress event doesn't fire correctly - fires once or twice at the beginning of the upload, when the last event states that the upload has finished but it doesn't, and at the network tab you can see that the file is still uploading.
notable even in 2MB files.

here is the console when using debug:true for a 2140K file

    Received 1 files.
    Attempting to validate image.
    Attempting to draw client-side image preview.
    Attempting to determine if test.pdf can be rendered in this browser
    First pass: check type attribute of blob object.
    test.pdf is not previewable in this browser per the blob's type attr
    Not previewable
    Sending simple upload request for 0
    Submitting S3 signature request for 0
    Sending POST request for 0
    Sending upload request for 0
    // here the upload started, put console.log at the onProgress event to log loaded, total
    // 901120 2191263
    // 2191263 2191263
    // NOTE - seems like the file finishd upload but it takes it some time to finish uploading**
    s3.fine-uploader-5.10.0.js?v=2.0.3.1:252 [Fine Uploader 5.10.0] Received response status 200 with body: 
    s3.fine-uploader-5.10.0.js?v=2.0.3.1:252 [Fine Uploader 5.10.0] Simple upload request succeeded for 0
    s3.fine-uploader-5.10.0.js?v=2.0.3.1:252 [Fine Uploader 5.10.0] Submitting upload success request/notification for 0
    s3.fine-uploader-5.10.0.js?v=2.0.3.1:252 [Fine Uploader 5.10.0] Sending POST request for 0
    s3.fine-uploader-5.10.0.js?v=2.0.3.1:252 [Fine Uploader 5.10.0] Received the following response body to an upload success request for id 0: {..}
    s3.fine-uploader-5.10.0.js?v=2.0.3.1:252 [Fine Uploader 5.10.0] Upload success was acknowledged by the server.

the progress works fine at the fineUploader demo page
the difference is that the demo doesn't use signed urls
compared requests/responses and didn't find anything different

Here is the log for the same file when uploading to my server using qq.FineUploaderBasic:

    Received 1 files.
    Attempting to validate image.
    Attempting to draw client-side image preview.
    Attempting to determine if test.pdf can be rendered in this browser
    First pass: check type attribute of blob object.
    test.pdf is not previewable in this browser per the blob's type attr
    Not previewable
    Sending simple upload request for 0
    // 311296 2191263
    // 1032192 2191263
    // 1064960 2191263
    // 1081344 2191263
    // 1130496 2191263
    // 1245184 2191263
    // 1507328 2191263
    // 1622016 2191263
    // 1949696 2191263
    // 2191263 2191263
    // Here the progress finished when the file actually got to my server
    xhr - server response received for 0
    responseText = {..}
    Received response status 200 with body: {..}
    Simple upload request succeeded for 0

Will be happy for any direction how to solve this, already put console.log at the fineUploader code at the point of the progress event and saw it isn't swallowing progress events, seems like i'm missing something (might be a CORS issue..)

Edit had this problem when working on localhost, uploaded it to my staging env and progress bar works perfectly, i think chrome and FireFox report faulty progress when the origin is localhost


Solution

  • There is no issue here. The file is likely just uploading very quickly. This is compounded by the fact that you are uploading very small files. The wait at the end of the upload is S3 either combining any file chunks, or we are simply waiting for a response to whatever requests are set to happen after the last byte has been sent.