Initial file list: inverted colors with gif files

[elektromodulator]

Type of issue

• Bug report
• Feature request

Uploader type

• Traditional
• S3
• Azure

Note: Support requests cannot be accepted due to lack of time.

Bug Report

Fine Uploader version

5.15.0

Browsers where the bug is reproducible

"Firefox", "Chrome" and "IE11"

Operating systems where the bug is reproducible

"Windows Server 2012 R2"

Exact steps required to reproduce the issue

1. Select multiple gif files (like pause.gf, processing.gif, retry.gif from fine uploader package)
   
2. After upload is completed, initiate form post/reload to trigger the initial file list feature.
3. Gif file thumbnails are now have inverted colors.
   

All relevant Fine Uploader-related code that you have written

Fine-uploder configuration:

    document.addEventListener("DOMContentLoaded", function () {
        "use strict";

        var uploaderElement = $("#@id");
        var form = uploaderElement.closest("form");
        var submitButton = form.find("[type=\"submit\"]");

        function refreshFileIds() {
            var fileIdContainerElement = $("#@id-fileIds");
            fileIdContainerElement.empty();
            uploader.getUploads({
                status: qq.status.UPLOAD_SUCCESSFUL
            }).forEach(function (uploadedFile) {
                $("<input type=\"hidden\" name=\"uploadedFileIds[]\" value=\"" + uploadedFile.uuid + "\" />")
                    .appendTo(fileIdContainerElement);
            });
        }

        var uploader = new qq.FineUploader({
            debug: true,
            element: uploaderElement[0],
            request: {
                endpoint: "@Url.Action("Upload", "FileManager")",
                inputName: "file",
                filenameParam: "fileName",
                uuidName: "fileId",
                totalFileSizeName: "totalFileSizeInBytes",
                params: {
                    uploaderId: "@id"
                }
            },
            text: {
                failUpload: "@UploadResources.UploadFailed",
                formatProgress: "{percent}% @UploadResources.Of {total_size}",
                paused: "@UploadResources.Paused",
                waitingForResponse: ""
            },
            retry: {
                enableAuto: true,
                autoRetryNote: "@UploadResources.Retrying {retryNum}/{maxAuto} ..."
            },
            deleteFile: {
                enabled: true,
                forceConfirm: true,
                endpoint: "@Url.Action("Delete", "FileManager")"
            },
            session: {
                endpoint: "@Url.Action("Files", "FileManager")",
                params: {
                    @if (Model.UploadedFileIds != null)
                    {
                        for (int index = 0; index < Model.UploadedFileIds.Length; index++)
                        {
                            @:"fileIds[@index]": "@Model.UploadedFileIds[index]",
                        }
                    }
                }
            },
            thumbnails: {
                placeholders: {
                    notAvailablePath: "@Url.Content("~/Content/fine-uploader/placeholders/not_available-generic.png")",
                    waitingPath: "@Url.Content("~/Content/fine-uploader/placeholders/waiting-generic.png")"
                }
            },
            paste: {
                targetElement: document.body,
                promptForName: true,
                namePromptMessage: "@UploadResources.NameImagePrompt"
            },
            callbacks: {
                onAllComplete: refreshFileIds,
                onDeleteComplete: refreshFileIds,
                onSessionRequestComplete: refreshFileIds
            }
        });
    });

Response from session endpoint:

[
    {
        "name": "pause.gif",
        "uuid": "7433609a-d662-4707-9c56-d66caff16eeb",
        "size": 142,
        "thumbnailUrl": "/(S(nuz2otrizbyxshrjlve31arw))/FileManager/Thumbnail/7433609a-d662-4707-9c56-d66caff16eeb"
    },
    {
        "name": "processing.gif",
        "uuid": "84853326-2cd5-45cb-8428-b47882002c34",
        "size": 3209,
        "thumbnailUrl": "/(S(nuz2otrizbyxshrjlve31arw))/FileManager/Thumbnail/84853326-2cd5-45cb-8428-b47882002c34"
    },
    {
        "name": "retry.gif",
        "uuid": "44592434-1e03-4e16-9b67-7557eb4f0e2c",
        "size": 173,
        "thumbnailUrl": "/(S(nuz2otrizbyxshrjlve31arw))/FileManager/Thumbnail/44592434-1e03-4e16-9b67-7557eb4f0e2c"
    }
]

Detailed explanation of the problem

I use ASP.Net MVC server side validation. My goal is that when the form is not valid, the server roundtrip does not wipe the uploaded files. For that I use the initial file list feature. The problem is that as described above, initial file list feature generates different (and wrong) thumbnails for gif files. I inspected the packages coming from server, and server sends back correct gif images, with "image/gif" Mime-type. Since I use ASP.Net MVC, the images are not served as files but served from an endpoint /Thumbnails/{uuid}, so there is no extension information in the URL.
For PNG and JPEG the thumbnails seem to be correct with initial file list.