CODEWITHSUNDEEP
javascriptinternet-explorersymfonyjquery-file-upload
DamienL
DamienL

Reputation: 19

File upload with blueimp jQuery file upload, doesn't work in IE9

have create an upload functionality with jQuery-file-upload, my upload work in Firefox, Chrome and IE version more than 9.

I have try to force iframe transport, recommended by doc of jQuery-fileupload plugin. Fileupload do his tasks, but he send an empty object. So, symfony send an error about file. My upload process work like this: Backbone.js + require.js -> symfony -> rackspace

                $(selector).fileupload({
                dataType: 'json',
                autoUpload: true,
                url: 'http://' + IM('site').get('domain') + '/' + window.PadawanSite.envPath + '/upload/adpost/img',
                forceIframeTransport: true,

                add: function (e, data) {
                    var id = e.target.id.substring(e.target.id.length - 2),
                        jqXHR = data.submit()
                            .success(function (result, textStatus, jqXHR) {
                                images.push({
                                    id: id,
                                    original: result.publicUrl.original,
                                    large   : result.publicUrl.large,
                                    medium  : result.publicUrl.medium,
                                    small   : result.publicUrl.small
                                });
                            })
                            .error(function (jqXHR, textStatus, errorThrown) {
                                $('#picture_callback_' + id).removeClass('glyph icon-spinner2 icon-refresh-animate').addClass('glyph-05 icon-x-empty');
                            })
                            .complete(function (result, textStatus, jqXHR) {
                                if (textStatus === "success") {
                                    var ad = IM('ad').toJSON();
                                    ad.images = images;
                                    IM('ad').clear().set(ad);
                                    IM('ad').save(ad);
                                    if (IM('ad').toJSON()) {
                                        $('#adpost_picture_img_' + id).attr("src", result.responseJSON.publicUrl.small);
                                        $('#picture_callback_' + id).removeClass('glyph icon-spinner2 icon-camera icon-x-empty icon-refresh-animate').addClass('glyph-05 icon-v');
                                        $('#adpost_picture_visualize').removeAttr('disabled');
                                    }
                                }
                            });
                    $('#adpost_picture_visualize').attr('disabled', 'disabled');
                    $('#picture_callback_' + id).removeClass('glyph-05 icon-camera icon-x-empty').addClass('glyph icon-spinner2');
                    $('#picture_callback_' + id).addClass('icon-refresh-animate');
                    $('#adpost_picture_name_' + id).empty();
                    $('#adpost_picture_name_' + id).append(data.files[0].name);
                }
            });

My request headers, it sent to symfony. But you can see a content-length equal to 0. So it's the problem, but why he do that ?

X-Requested-With: XMLHttpRequest
Host: sjus.local
Request: POST /app_dev.php/upload/adpost/img HTTP/1.1
Cache-Control no-cache
User-Agent Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko
Connection Keep-Alive
Referer http://sjus.local/app_dev.php#postad/picture
Accept-Encoding gzip, deflate
Accept-Language en-us
Content-Length 0
Accept */*

Upvotes: 0

Views: 967

Answers (1)

elvin
elvin

Reputation: 981

This is a know restriction on IE8/9 when you're doing a cross-domain file upload as the plugin's documentation site says.

I faced this problem once, specifically I was getting the "Permission denied" error when the plugin was trying to retrieve the response from the iframe, this was because in my case the site was a subdomain in the same domain as the api. So I was able to use the option "initialIframeSrc" to specify the document.domain to be used in the iframe (lucky me). I did something like this:

dataType: 'text',
forceIframeTransport: true,
initialIframeSrc: "javascript:document.write('<script>document.domain=\"mydomain.com\";</script>')",

This way the plugin was able to retrieve the response from the iframe contents.

Hope this helps.

Upvotes: 1

Related Questions