uploader not working in chrome/windows 8

[scott]

Hello!

I'm having a bit of a problem with the uploader all of a sudden -- I'm thinking that it's happened since the latest version of kendoui (2012.3.1114), but I might be wrong with that.

I have an input field in my view:                     
<input id="personalDetails_files" type="file" />

and some code to wire it up:

$("#personalDetails_files").kendoUpload({

    async: {

        saveUrl: "/Uploader/SaveUserThumbnail.aspx",

        removeUrl: "/Uploader/RemoveUserThumbnail.aspx",

        autoUpload: true,

        multiple: false

    },

    select: function (e) {

        if ($('#personalDetails_files').parents(".k-upload").find('.k-file').length >= 1) {

            e.preventDefault();

        }

    },

    upload: function (e) {

        debugger;

    },

    success: function (e) {

        if (e.operation == "remove") {

            //k-upload-button

            $('#personalDetails_files').parents(".k-upload").find('.k-upload-button').show();

            $("#imgPersonalDetails_Thumbnail")[0].src = "/styles/" + currentTheme + "/default.png";

        } else {

            //k-upload-button

            $('#personalDetails_files').parents(".k-upload").find('.k-upload-button').hide();

            $("#imgPersonalDetails_Thumbnail")[0].src = "/UserThumbnails/" + window.currentUser.ID + "_" + e.files[0].name;

        }

        //remove the select button

    },

    remove: function (e) {

 

    },

    error: function (e) {

    }

});

This works great in the latest version of IE/Windows 8, but when I try it in Chrome it fails when the file is uploaded to the server.

The request payload in Chrome>Network Tab is:  ------WebKitFormBoundarygQUKJsVmVusYpfYS--

So, it appears that the uploaded file is not getting added to the submit form that goes to the server.   

Any ideas as to why this is happening? 

Thanks!

[scott]

Hello?  Should I fill out a support ticket for this problem?

Thanks,
se

[T. Tsonev]

Hi,

I've tested this problem here and the only way I could break the upload in Chrome is to omit the input name attribute (here). But this is not valid anyway.

Can you please check if you have set a name?

Greetings,
Tsvetomir Tsonev
the Telerik team

[scott]

Hi Tsvetomir!

Thanks a lot for your reply.  A big high-5 for the advice.

I've changed the html to:
<input id="personalDetails_files" name="personalDetails_files" type="file" />

And, magically it works (sort of).  Interesting enough, it does upload the file, but it uploads it twice, which is weird.  Any idea why that might be the case?  I haven't changed any of the code from the jsbin example...  I guess I'll start to debug it a bit and see if I can sort it out

Thanks,
se

[scott]

Hello!

Well, I've done a bit of debugging -- I put a debugger in at the success event and found that it gets called 4 times!  crazy, eh?  Here's my code:

$("#personalDetails_files").kendoUpload({

     async: {

         saveUrl: "/Uploader/SaveUserThumbnail.aspx",

         removeUrl: "/Uploader/RemoveUserThumbnail.aspx",

         autoUpload: true,

         multiple: false

     },

     select: function (e) {

         if ($('#personalDetails_files').parents(".k-upload").find('.k-file').length >= 1) {

             e.preventDefault();

         }

     },

     upload: function (e) {

         //debugger;

     },

     success: function (e) {

         debugger; //I get hit 4 times!!!

         if (e.operation == "remove") {

             //k-upload-button

             $('#personalDetails_files').parents(".k-upload").find('.k-upload-button').show();

             $("#imgPersonalDetails_Thumbnail")[0].src = "/styles/" + currentTheme + "/default.png";

         } else {

             //k-upload-button

             $('#personalDetails_files').parents(".k-upload").find('.k-upload-button').hide();

             $("#imgPersonalDetails_Thumbnail")[0].src = "/UserThumbnails/" + window.currentUser.ID + "_" + e.files[0].name;

         }

         //remove the select button

     },

     remove: function (e) {

 

     },

     error: function (e) {

     }

 });

Checking out the Network tab in Chrome, I find that my SaveUserThumbnail.aspx gets called 2x.  I checked the Request Payload and have found that there is nothing weird in there -- it has the following:
 
------WebKitFormBoundaryIHALjbBaaEPVv9B4
Content-Disposition: form-data; name="personalDetails_files"; filename="event_delete.png"
Content-Type: image/png


------WebKitFormBoundaryIHALjbBaaEPVv9B4--


So, not sure what the deal is...  Any thoughts?

Thanks,
se

[T. Tsonev]

Hi,

We had similar problems in the past that were related to a bug in jQuery.
Please, make sure you're using the latest version (or at least 1.8.2).

Kind regards,
Tsvetomir Tsonev
the Telerik team

[scott]

Hello!

Hmmm -- I'm using 1.8.2 actually -- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

I'm still having this problem -- do you know what JQuery was angry about in the earlier versions?

Thanks,
se

[T. Tsonev]

Hi,

Older versions of jQuery (1.7.x) fired the form change event twice, but this only affected IE as far as I remember.

What happens if you place the upload in an empty page? Do you still get the same behavior?

All the best,
Tsvetomir Tsonev
the Telerik team

[Clive]

I'm having the same problem with the kendo upload not working on chrome on windows 8.

Using:

kendoui.web.2012.3.1315.commercial
jquery 1.9.1

Works on:

IE 9
Firefox (latest)

Tried:

kendoui.2013.1.226.beta.trial

There are no javascript errors and no events are firing, onupload, onsuccess or onerror.

[Vladimir Iliev]

Hi Scott,

From the provided information it seems that currently you are using unsupported version of jQuery - v.1.9.1. Could you please downgrade the jQuery to the supported v.1.8.2 and let us know of the result?

Kind Regards,
Vladimir Iliev
the Telerik team