uploader not working in chrome/windows 8

10 posts, 0 answers
  1. scott
    scott avatar
    15 posts
    Member since:
    Sep 2006

    Posted 02 Jan 2013 Link to this post

    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!



  2. scott
    scott avatar
    15 posts
    Member since:
    Sep 2006

    Posted 04 Jan 2013 Link to this post

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

    Thanks,
    se
  3. Kendo UI is VS 2017 Ready
  4. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 07 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. scott
    scott avatar
    15 posts
    Member since:
    Sep 2006

    Posted 07 Jan 2013 Link to this post

    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
  6. scott
    scott avatar
    15 posts
    Member since:
    Sep 2006

    Posted 07 Jan 2013 Link to this post

    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

  7. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 09 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. scott
    scott avatar
    15 posts
    Member since:
    Sep 2006

    Posted 09 Jan 2013 Link to this post

    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
  9. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 14 Jan 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Clive
    Clive avatar
    1 posts
    Member since:
    Nov 2012

    Posted 10 Mar 2013 Link to this post

    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.
  11. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 12 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready