Upload working in FF but not IE

[Sam]

I am using FireFox 20.0.1 and IE8. We officially support IE8 at work. As a dev, I like FF and Chrome. Using FF and Chrome, everything works fine. When using IE8, the upload process stops right after I select a file. When I do, I get a pulsing yellow dot (instead of solid green) and that's it. 

First, I get and " '$telerik' is undefined" error in the following:

<script language="javascript" type="text/javascript">
   var $ = $telerik.$;
   var uploadsInProgress = 0;

   function onFileSelected(sender, args) {
       if (!uploadsInProgress)
           $("#SaveButton").attr("disabled", "disabled");

            uploadsInProgress++;

            var row = args.get_row();

            $(row).addClass("file-row");
        }

        function onFileUploaded(sender, args) {
            decrementUploadsInProgress();
        }

        function onUploadFailed(sender, args) {
            decrementUploadsInProgress();
        }

        function decrementUploadsInProgress() {
            uploadsInProgress--;

            if (!uploadsInProgress)
                $("#SaveButton").removeAttr("disabled");
        }
</script>

Which could start off the chain of bad events. Also once I click on the Select button (to choose a file), the "$("#SaveButton").attr("disabled", "disabled");" line throws and error saying "Object expected".

Now I think I'm running into some Silverlight issues. The second line in ScriptResource.axd:

if(!a(s).data("cancel")){var t=c[a(s).data("silverlight")];
t.Content.Page.MarshalUploads();

Is giving me the error "System.InvalidOperationException: [ScriptObject_InvokeFailed]
Arguments: 
Debugging resource strings are unavailable. Often the key and arguments provide sufficient information to diagnose the problem. See http://go.microsoft.com/fwlink/?linkid=106663&Version=8.1.20125.0&File=System.Windows.Browser.dll&Key=ScriptObject_InvokeFailed
   at System.Windows.Browser.ManagedObjectInfo.Invoke(ManagedObject obj, InvokeType invokeType, String memberName, ScriptParam[] args)
   at System.Windows.Hosting.ManagedHost.InvokeScriptableMember(IntPtr pHandle, Int32 nMemberID, Int32 nInvokeType, Int32 nArgCount, ScriptParam[] pArgs, ScriptParam& pResult, ExceptionInfo& pExcepInfo)".

Then, most importantly, I receive the following error: "Microsoft JScript runtime error: Unhandled Error in Silverlight Application [ScriptObject_InvokeFailed]
Arguments: 
Debugging resource strings are unavailable. Often the key and arguments provide sufficient information to diagnose the problem. See http://go.microsoft.com/fwlink/?linkid=106663&Version=8.1.20125.0&File=System.Windows.Browser.dll&Key=ScriptObject_InvokeFailed   at System.Windows.Browser.ScriptObject.Invoke(String name, Object[] args)
   at UploadPrototype.EventManager.FilesSelected(Int32 filesCount)
   at UploadPrototype.MainPage.OpenDialog()
   at UploadPrototype.MainPage.OnMouseLeftButtonUp(MouseButtonEventArgs e)
   at System.Windows.Controls.Control.OnMouseLeftButtonUp(Control ctrl, EventArgs e)
   at MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, Int32 actualArgsTypeIndex, String eventName, UInt32 flags)".

It's clear that because I'm using IE8, the control is degrading down to Silverlight but is having a problem with that. I don't understand why since I have Silverlight 5.1 installed. I'm not sure what the problem is or what to do about it. 

Thanks!

[Sam]

So I did a little testing and I think this has something to do with IE's implemntation of JavaScript. 

On the RadAsyncUpload control I used the DisablePlugins="true" which renders the control not in Silverlight or Flash, but rather in an IFrame which should be supported by pretty much every browser. 

Again, all this works fine in FireFox and Chrome. But IE doesn't even upload. I get a pulsating yellow like in the attachment. 

Again, the JavaScript code in question sis below:

<script language="javascript" type="text/javascript">
        var $ = $telerik.$;
        var uploadsInProgress = 0;

        function onFileSelected(sender, args) {
            if (!uploadsInProgress)
              $("#SaveButton").attr("disabled", "disabled");

            uploadsInProgress++;

            var row = args.get_row();

            $(row).addClass("file-row");
        }

        function onFileUploaded(sender, args) {
            decrementUploadsInProgress();
        }

        function onUploadFailed(sender, args) {
            decrementUploadsInProgress();
        }

        function decrementUploadsInProgress() {
            uploadsInProgress--;

            if (!uploadsInProgress)
              $("#SaveButton").removeAttr("disabled");
        }
 </script>

The associated HTML:

<div>
    <div style="z-index:1000; float:left; width:150px; padding-top:12px">
        <strong style="color: #00529B; padding-left:25px">Attachments: </strong>
    </div>
    <div style="padding-left:25px; float:left; width:400px">
    <telerik:RadAsyncUpload ID="RuAttachments" runat="server"
                    MultipleFileSelection="Automatic"
                    EnableInlineProgress="true"
                    TemporaryFolder="~/WebFormAttachments/Temp"
                    TargetFolder="~/WebFormAttachments"
                    AllowedFileExtensions=".jpeg,.jpg,.png,.doc,.docx,.xls,.xlsx,.pdf"
                    OnClientFileUploadFailed="onUploadFailed"
                    OnClientFileSelected="onFileSelected"
                    OnClientFileUploaded="onFileUploaded"
                    OnFileUploaded="RuAttachments_FileUploaded"
                    DisablePlugins="true" />
     <span class="allowed-attachments">
         Select files to upload (<%= String.Join(",", ruAttachments.AllowedFileExtensions)%>)
     </span>
 </div>
 <br style="clear:both" />
 </div>
 <div style="padding-left:0px;padding-right:0px;padding-bottom:0px; margin:5px; margin-top:8px;   border-top-color:#FFD102; border-top-style:solid; border-top-width:1px; z-index:-100"></div>
 </div>
 <div id="webform-footer">
     <asp:Button ID="SubmitButton" runat="server" Text="Submit Request" style="font-weight:bold" OnClick="SubmitButton_Click" CssClass="buttonAltLikeAdmin" Height="30px" Width="175px" CausesValidation="false" />
  </div>

What about the line "var $ = $telerik.$;" isn't good? I get a $telerik is undefined error.  Also "var row = args.get_row();" give me an Object Required error. 

[Hristo Valyavicharski]

Hi Sam,

I was able to reproduce the issue with IE8. At the moment we are debugging the problematic code. I will get back to you as soon as we have more information about this behavior.

Thanks.

Regards,
Hristo Valyavicharski
the Telerik team

[Hristo Valyavicharski]

Hi Sam,

Please, find the attached sample. It contains trial version of the latest Telerik assemblies. Could you verify if the issue still exists?

Thanks.

Regards,
Hristo Valyavicharski
Telerik

[Henri]

Can somebody explain to me what this line does:

var $ = telerik.$;  ?

It has been driving me insane for day and I have tried everythin in http://blogs.telerik.com/AtanasKorchev/Posts/08-07-18/Web_Resources_demystified_Part_3_Troubleshooting.aspx

I took this line out and the radasyncupload still works fine.
wmin

 

 

 

[Hristo Valyavicharski]

Hi Henri,

Telerik Ajax controls uses jQuery internally and it exists as a embedded resource in the Telerik.Web.UI.dll. In order to avoid conflicts in jQuery versions internally we use this variable name - $telerik.$ for jQuery. This line:
var $ = telerik.$;  just give a shorter variable name to jQuery (which is the same as the default $). 

Instead of using this line you may refer jQuery as follows:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
    </Scripts>
</telerik:RadScriptManager>

Regards,
Hristo Valyavicharski
Telerik

[Bas]

Hello Hristo,

I have the similar issues with RadAsyncUpload, as its not working in IE8 , IE9 or the lower versions of IE ( less than IE 10 ). I followed the same steps in my web application as per the sample attached. But on IE8 and IE9 the image is uploaded on the second attempt not the first. Can you please help me?. I also posted the similar posts with RadAsyncUpload problems I am facing here. 

Due to the files restrictions, I couldn't attach the files here, Please download the files with the approach I am following from the following link

Code Files


Thanks

[Shinu]

Hi Bas,

Please try the sample code snippet which works fine at my end.

ASPX:

<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1"  OnClientFileUploaded="onClientFileUploaded" PostbackTriggers="RadButton1"/>
<telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" Width="495" Height="331"
            ResizeMode="Fit">
</telerik:RadBinaryImage>
<asp:Button runat="server" ID="RadButton1" Text="Submit your picture and information" />

JavaScript:

<script type="text/javascript">
    function onClientFileUploaded(sender, args) {
        var upload = $find("<%=RadAsyncUpload1.ClientID %>");
        if (upload.getUploadedFiles().length > 0) {
            document.getElementById("<%=RadButton1.ClientID%>").click();
        }
    }
</script>

C#:

protected void Page_Load(object sender, EventArgs e)
{
    RadAsyncUpload1.FileUploaded += new Telerik.Web.UI.FileUploadedEventHandler(RadAsyncUpload1_FileUploaded);
}
void RadAsyncUpload1_FileUploaded(object sender, Telerik.Web.UI.FileUploadedEventArgs e)
{
    Bitmap bitmapImage = ResizeImage(RadAsyncUpload1.UploadedFiles[0].InputStream);
    System.IO.MemoryStream stream = new System.IO.MemoryStream();
    bitmapImage.Save(stream, System.Drawing.Imaging.ImageFormat.Bmp);
    RadBinaryImage1.DataValue = stream.ToArray();
}
public Bitmap ResizeImage(Stream stream)
{
    System.Drawing.Image originalImage = Bitmap.FromStream(stream);
    int height = 331;
    int width = 495;
    Bitmap scaledImage = new Bitmap(width, height);
    using (Graphics g = Graphics.FromImage(scaledImage))
    {
        g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
        g.DrawImage(originalImage, 0, 0, width, height);
        return scaledImage;
    }
}

Thanks,
Shinu.

[Bas]

Hello Shinu,

After so long got a chance to review the older posts here. Thanks for your reply. I tried as per the sample provided by you and found that 
"deleteFileInputAt" doesn't work at all in IE9 or below. But it works fine in IE10 , FF and Chrome. This seems like a known issue with the Telerik Rad Async upload control. But any ways thank you so much for your concern. Will get back to forum soon.


Thanks
Bas

[Eileen]

Hi 

We are facing same issue with 2014.1.403 (APR 03, 2014).   Working fine with Chrome and FF but not in IE 9.    

Could you please let us know the fix please.

Thanks,

[Bas]

Hello Eileen,

There is a specific line of code on the client side (the Javascript API of RadAsyncUpload Control) that doesn't work in IE9 or below. But it works fine in FF and Chrome because they support that action. Can you please post your code here so that I may give it a review if it is the same problem that I faced few days back? And also please post the error (Javascript error that appears on IE9 that you get ).


Thanks
Bas

[IS Programming]

Hi 

We are facing same issue with 2014.1.403.45  Working fine with Chrome, FireFox and >IE9, but not in IE 9.    

If there is a fix or work-around is available for this issue then I would love to know what it is. 
Thanks,

[JR]

We just purchased the UI for ASP.NET AJAX specifically for the Async Upload.

IE 9 and under just give a pulsating yellow dot.  We need to release a solution in the next couple weeks.  Is there a known work-around?

Thanks,
J.R.

[Hristo Valyavicharski]

Hi J.R.,

Usually this means that the AsyncUpload is not configured correctly. Please provide a Fiddler Log or sample project.

Thanks.

Regards,
Hristo Valyavicharski
Telerik

 

 

[Justin]

Just curious if any solution is found.  I also get pulsating yellow which turns green when it finishes.  Also get an empty progress bar (just shows an outline, but not the blue color).  Using IE8 as well.

[JR]

Yes.  It was a silly mistake on my end.  In the troubleshooting instructions Telerik has a section called XML (which I ignored).  What I realized later was this was refering to the Web.Config XML.

Once I added the handler to the web.config, all was well again.

[Justin]

Sadly, that didn't work for me.  The big progress area box works, but not the inline one.