javascriptinternet-explorer-8fine-uploader

Fine Uploader - No valid message received from loaded iframe


Attempting to make an existing fine uploader v4.2.2 instance work with IE8, however it's returning "No valid message received from loaded iframe".

Read through the 3.3 and 3.7 CORS support blog posts - modified my .net MVC handler to detect non-XHR requests and react accordingly. On the client side already had the CORS property "expected" set to true, but tried setting combinations of "sendCredentials" and "allowXdr" to true with no obvious effects.

Used Fiddler to confirm I'm returning the correct content type (text/html) and the usual JSON response is followed by a script block pointing at a valid URL for "iframe.xss.response.js" - tried hosting on both the primary URL and the uploader handler sub-domain.

Everything still works perfectly well in current browsers, just feels like I'm missing something obvious with my attempts at IE8 support.

This is my sanitized JS;

var fupParams = {
    userId: 12345,
    userKey: 67890
};

var fupInstance = $("#fine-uploader")
    .fineUploader({
        template: "qq-template",
        thumbnails: {
            placeholders: {
                waitingPath: "/placeholders/waitingPath.gif",
                notAvailablePath: "/placeholders/notAvailablePath.gif"
            }
        },
        session: {
            endpoint: "//upload.example.com/Upload/List",
            params: fupParams
        },
        request: {
            endpoint: "//upload.example.com/Upload/Upload",
            params: fupParams
        },
        failedUploadTextDisplay: {
            mode: "custom"
        },
        deleteFile: {
            customHeaders: {},
            enabled: true,
            endpoint: "//upload.example.com/Upload/Delete",
            method: "DELETE",
            forceConfirm: true,
            params: fupParams
        },
        validation: {
            allowedExtensions: Array("jpg","png")
        },
        cors: {
            expected: true,
            sendCredentials: false
        },
        autoUpload: true,
        editFilename: {
            enabled: true
        },
        classes: {
            success: "alert alert-success",
            fail: "alert alert-error"
        },
        showMessage: function (message) {
            // Simple event handler
        }
    })
    .on("submit", function (event, id, name) {
        // Use qq.Promise() to modify fupParams prior to upload
    })
    .on("submitDelete", function (event, id, name) {
        // Use qq.Promise() to modify fupParams prior to delete
    })
    .on("error", function (event, id, name, errorReason, xhrOrXdr) {
        // Simple event handler
    })
    .on("complete", function (event, id, name, response) {
        // Simple event handler
    })
    .on("sessionRequestComplete", function (event, response, success, xhrOrXdr) {
        // Simple event handler
    })
    .on("deleteComplete", function (event, id, xhrOrXdr, isError) {
        // Simple event handler
    })
;

Included two upload handler responses captured through Fiddler, first with success set to false because my choice of image was too small;

HTTP/1.1 200 OK
Cache-Control: private
Content-Type: text/html; charset=utf-8
Server: Microsoft-IIS/7.5
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers: Content-Type, cache-control, x-requested-with
Access-Control-Allow-Credentials: false
Date: Tue, 17 Mar 2015 12:47:54 GMT
Content-Length: 204

{
  "success": false,
  "error": "Minimum upload size is 150 KB, \"Winter.jpg\" was 103 KB"
}<script src="//www.example.com/fineuploader-4.2.2/iframe.xss.response.js"></script>

Immediately afterwards IE fetches "waitingPath.gif" and "iframe.xss.response.js", but I'm not seeing any custom error text - just the "No valid message" error.

Second capture is with success set to true due to a larger image and we're returning some custom parameters, results are the same as above.

HTTP/1.1 200 OK
Cache-Control: private
Content-Type: text/html; charset=utf-8
Server: Microsoft-IIS/7.5
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers: Content-Type, cache-control, x-requested-with
Access-Control-Allow-Credentials: false
Date: Tue, 17 Mar 2015 12:51:18 GMT
Content-Length: 278

{
  "pageList": [],
  "name": "Winter 2.JPG",
  "uuid": "2563",
  "size": 281,
  "thumbnailUrl": null,
  "pageCount": 0,
  "success": true,
  "newUuid": "2563"
}<script src="//www.example.com/fineuploader-4.2.2/iframe.xss.response.js"></script>

EDIT: Thank you for the help, my responses were either using UUID incorrectly or were missing it completely - see below for the end results.

Success

HTTP/1.1 200 OK
Cache-Control: private
Content-Type: text/html; charset=utf-8
Server: Microsoft-IIS/7.5
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers: Content-Type, cache-control, x-requested-with
Access-Control-Allow-Credentials: false
Date: Tue, 17 Mar 2015 15:01:57 GMT
Content-Length: 310

{
  "pageList": [],
  "name": "Winter 2.JPG",
  "newUuid": "2567",
  "size": 281,
  "thumbnailUrl": null,
  "pageCount": 0,
  "success": true,
  "uuid": "6cb9f309-0c38-4a73-aa13-879abbfff008"
}<script src="//www.example.com/addin/fineuploader-4.2.2/iframe.xss.response.js"></script>

Failure

HTTP/1.1 200 OK
Cache-Control: private
Content-Type: text/html; charset=utf-8
Server: Microsoft-IIS/7.5
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers: Content-Type, cache-control, x-requested-with
Access-Control-Allow-Credentials: false
Date: Tue, 17 Mar 2015 15:01:43 GMT
Content-Length: 255

{
  "success": false,
  "uuid": "61a4e504-4b89-4b67-ad38-df23d7c4a247",
  "error": "Minimum upload size is 150 KB, \"Winter.jpg\" was 103 KB"
}<script src="//www.example.com/addin/fineuploader-4.2.2/iframe.xss.response.js"></script>

Solution

  • The first response is not parsed properly due to the missing uuid parameter. The second response looks a little strange. Is "2563" the UUID sent by Fine Uploader in the request, or is it the new UUID you would like to assign the file? You have "uuid" and "newUuid" params in the response both with the same value. The UUID in this response MUST match the UUID of the file according to the request you are responding to.

    It's not clear if that issue the issue here, but having a matching "uuid" and "newUuid" suggests there is an issue in your code or a misunderstanding on your part.