Preview image before it have been uploaded with RadAsyncUpload

7 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 31 Jul 2014 Link to this post

    Requirements

    Telerik Product and Version



    UI for ASP.NET AJAX Q2 2014

    Supported Browsers and Platforms


    Components/Widgets used (JS frameworks, etc.)

    .NET 3.5/4.0/4.5

    PROJECT DESCRIPTION 
    In cases when RadAsyncUpload is used for uploading images it can often be useful to be able to preview the images before you actually upload them.

    Such behavior can be achieved either in browsers that support FileApi by drawing image with canvas or in the older browsers(IE7,8,9) by implementing a scenario similar to the one described in this help topic.

    In the attached sample page these two methods are combined in one solution using RadAsyncUpload.

    P.S. In the current version of FireFox (31) there is some bug with the drawImage() method which is throwing an error but I hope they will fix it soon. Meanwhile we can alert that the issue is currently not supported by the browser.
  2. Qunwei
    Qunwei avatar
    4 posts
    Member since:
    Jan 2016

    Posted 25 Jan Link to this post

    HI, I find this example very useful, it is exactly what I need. Although its 1.5 years later.

    However ,as the post stated, there is a bug with FireFox. The bug is still there as of today(1/25/2016) for FireFox(43.0.4). So in FireFox, this example doesn't work, it cannot preview multiple images, only the first image is showing. I have to Google and found a fix for this problem. And it works perfectly.

    However there is one problem. After I select images and see the preview, when I click the upload button, the application immediately kick me out and redirect me to the login page. This happens on our beta and prod environment. But it works on my local box and our test environment. I cannot find out what is the problem. Since it works on my local box, I cannot debug. I found no application log or event log on beta/prod servers. I see no javascript error except the one that cannot find jquery.min.map which I assume is not related to my problem.

    This is only for FireFox. Chrome and IE always work.

  3. Qunwei
    Qunwei avatar
    4 posts
    Member since:
    Jan 2016

    Posted 26 Jan Link to this post

    Can anyone help me with the problem I described in above post? I am really frustrated.
  4. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 28 Jan Link to this post

    Hi Qunwei,

    Please make sure that the session is not expired.

    Regards,
    Hristo Valyavicharski
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Qunwei
    Qunwei avatar
    4 posts
    Member since:
    Jan 2016

    Posted 28 Jan in reply to Hristo Valyavicharski Link to this post

    Hi, Hristo,

    Thank you for your reply. I cannot think of any reason that the session expires. It kicks me out as soon as I clicks the upload button. But it works fine in dev and test environment, and it works for Chrome and IE.

  6. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 29 Jan Link to this post

    Please open new support ticket and attach fiddler log with video.

    Thanks.

    Regards,
    Hristo Valyavicharski
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Qunwei
    Qunwei avatar
    4 posts
    Member since:
    Jan 2016

    Posted 12 Feb Link to this post

    We have fixed the problem. The problem is still FireFox's bug. My previous fix works in Chrome and IE, but failed on FireFox (though succeeds in some environments). Now we find the real fix, it works in all browsers and in all environments.

    The solution is: delay 10 ms before calling showThumbnail(...). Notice you cannot put the delay inside showThumbnail(...), that doesn't work.

     

    window.CurrentFileUploaded = function (radAsyncUpload, args) {

        ...

         if (navigator.userAgent.indexOf("Firefox") != -1) // if FireFox, delay 10 ms. This is the fix for FireFox bug!!!

        {

            setTimeout(function () { showThumbnail(...); }, 10);

        }

        else

        {

            showThumbnail(...);

        }

    }

    We have fixed the problem. The problem is still FireFox's bug, as indicated in that post

    http://www.telerik.com/support/code-library/preview-image-before-it-have-been-uploaded-with-radasyncupload

    The trick part is how to fix this bug: delay 10 ms before calling showThumbnail(...). Notice you cannot put the delay inside showThumbnail(...), that doesn't work.

    window.CurrentFileUploaded = function (radAsyncUpload, args) {
        ...
        if (navigator.userAgent.indexOf("Firefox") != -1) // if FireFox, delay 10 ms. This is the fix for FireFox bug!!! 
        {
            setTimeout(function () { showThumbnail(...); }, 10);
        }
        else
        {
            showThumbnail(...); 
        }
    
    }

    We have fixed the problem. The problem is still FireFox's bug, as indicated in that post

    http://www.telerik.com/support/code-library/preview-image-before-it-have-been-uploaded-with-radasyncupload

    The trick part is how to fix this bug: delay 10 ms before calling showThumbnail(...). Notice you cannot put the delay inside showThumbnail(...), that doesn't work.

    window.CurrentFileUploaded = function (radAsyncUpload, args) {
        ...
        if (navigator.userAgent.indexOf("Firefox") != -1) // if FireFox, delay 10 ms. This is the fix for FireFox bug!!! 
        {
            setTimeout(function () { showThumbnail(...); }, 10);
        }
        else
        {
            showThumbnail(...); 
        }
    
    }
Back to Top