0

I'm using the JQuery File Uploader plugin (Blueimp v9.5.7) to upload images to my website. This plugin is otherwise working great, but the thumbnail preview images are not showing consistently. The problem only happens with .tiff images and is somewhat browser specific. The preview does not show in Chrome and Firefox but it does show in Internet Explorer (IE 11 in my case). However, if the images are larger than ~6MB then the preview doesn't show in any browser. The maximum file size for this particular plugin is 10MB so it's not exceeding that.

I've been debugging this for a while and the closest I've come to identifying the error is in the jquery.fileupload-image.js file, lines 148-172:

loadImage: function (data, options) {
            if (options.disabled) {
                return data;
            }
            var that = this,
                file = data.files[data.index],
                dfd = $.Deferred();
            if (($.type(options.maxFileSize) === 'number' &&
                        file.size > options.maxFileSize) ||
                    (options.fileTypes &&
                        !options.fileTypes.test(file.type)) ||
                    !loadImage(
                        file,
                        function (img) {
                            if (img.src) {
                                data.img = img;
                            }
                            dfd.resolveWith(that, [data]);
                        },
                        options
                    )) {
                return data;
            }
            return dfd.promise();
        },

When the preview thumbnail shows, 'img' is an html image tag like this:

img src=​"blob:​http%3A/​/​www.mysite.com/​123456-789fdsa-kjl182" width=​"1024" height=​"768"

I'm pretty sure it gets this image tag from load-image.min.js line 4 (when pretty-printed)

!function(a) {
"use strict";
var b = function(a, c, d) {
    var e, f, g = document.createElement("img");
    if (g.onerror = c,
    g.onload = function() {
        !f || d && d.noRevoke || b.revokeObjectURL(f),
        c && c(b.scale(g, d))
    }

The 'a' variable that the function takes as input is the image file itself.

When the thumbnail doesn't show, img is an Event, with properties like this:

Event {isTrusted: true, type: "error", target: img, currentTarget: img, eventPhase: 2…}
bubbles:false
cancelBubble:false
cancelable:false
currentTarget:img
defaultPrevented:false
eventPhase:2
isTrusted:true
isTrusted:true
path:Array[1]
returnValue:true
srcElement:img
target:img
timeStamp:25962492.215000004
type:"error"
__proto__:Event

I see that it has type: 'error' but I have no idea what's causing it. I also have no idea why it's an event and not an image tag.

I've come across examples on the web (for example, this one here) of people utilizing an Angularjs file uploader and the same error occurs there. This leads me to believe that it's associated with Angular, but that's a hunch.

Any suggestions would be greatly appreciated!

quicklikerabbit
  • 3,257
  • 6
  • 26
  • 39
  • Have you tried loading the `.tiff` file without using plugin? – guest271314 Jun 23 '16 at 01:21
  • I have not, only because the plugin otherwise works great for most file types and sizes. Plus if I don't use this plugin, I'll have to come up with some other way to upload images, which I expect will be way more work. – quicklikerabbit Jun 23 '16 at 02:51
  • See http://stackoverflow.com/questions/28856729/upload-multiple-image-using-ajax-php-and-jquery/ – guest271314 Jun 23 '16 at 03:12
  • Thanks for sharing, but that approach seems to have the same problem that I describe above (check out the JS fiddle at the bottom of the accepted answer). This seems to mean it's not related to Angular, though, so that's progress! – quicklikerabbit Jun 23 '16 at 16:40
  • Located a sample `.tiff` image; both chromium and nightly prompted to save file; though nightly did suggest to launch local image viewer application. Neither browser displayed image. – guest271314 Jun 24 '16 at 01:43

0 Answers0