This is a migrated thread and some comments may be shown as answers.

select button with not show the select files window

10 Answers 479 Views

AsyncUpload

This is a migrated thread and some comments may be shown as answers.

warren asked on 29 May 2011, 02:10 PM

hi, being new to the telerik controls i am having a frustrating problem, and probably a so simple one to fix! when using the radupload control (and the standard .net upload file control) i get no issues, when trying to use the asyncupload control i cannot seem to see why the select file button does not bring the window to select the file from the users machine, i at first thought it could be something to do with the control being inside a multiview so moved the control to a simple aspx page and still the select button didnt work, any ideas would be greatly appreciated.

Edited: this is only happening with IE9, firefox and chrome are working fine.

Edited: IE9 in compatibility mode is also working, any advice on how to get this control working for IE9 would be great as the app. is close to being finished.

10 Answers, 1 is accepted

answered on 02 Jun 2011, 07:04 AM

I'm experiencing what I believe to be the same problem. Specifically...

On my development server, it's working fine
When I post it to my test server, the "Select" button does not appear to perform any function. Clicking anywhere on the control does not seem to do anything.
This behaviour appears to be cross-browser: at the very least, it is not working from my test site on IE9 or Chrome11.
I am using 2011.1.315.40

I'm not desperate yet, and will run quite a bit of exclusion tests - particularly as it is working on one server but not on another - but I came here to see if there was a quick thing that I was missing, and found this comment, so thought I'd add mine.

answered on 02 Jun 2011, 08:04 AM

A quick heads up to Warren: after testing on various machines, I found that Silverlight was the common thread. That is, if a system had Silverlight installed, RadAsyncUpload was rendering as Silverlight, and that wasn't working. If they didn't have Silverlight installed, it was rendering as Flash and that was working fine.

So as a quick workaround, I disabled Silverlight:

protected void Page_Load(object sender, EventArgs e)

{

string script1 = "Telerik.Web.UI.RadAsyncUpload.Modules.Silverlight.isAvailable = function () { return false; };";

string flashScript = String.Concat("<script type='text/javascript'> ", script1, " </script>");

this.Page.ClientScript.RegisterStartupScript(this.GetType(), "test", flashScript);

}

And it seems to be working fine now, after prelminary testing.

I'm not sure if this is a problem with my Silverlight installation, but I got an acquaintance in a completely different part of the country to give a simple test page a try, and they were experiencing the same problem.

In case it helps, the test page that didn't work without Silverlight being blocked was simply:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AsyncUploadTest.aspx.cs" Inherits="Max7.WebSite.testing.AsyncUploadTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<RAD:RadScriptManager ID="RadScriptManager1" runat="server" />

<div>

<RAD:RadAsyncUpload ID="RadAsyncUpload1" runat="server"

UploadRequestIdentifier="ae3f860a-7e2d-4488-bbfd-9f8aed4bb787">

</RAD:RadAsyncUpload>

</div>

</form>

</body>

</html>

The web.config contained the following sections:

<httpHandlers>

<add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false"/>

<add path="Telerik.RadUploadProgressHandler.ashx" type="Telerik.Web.UI.RadUploadProgressHandler" verb="*" validate="false"/>

<add path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler" verb="*" validate="false"/>

<add path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" verb="*" validate="false"/>

<add path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" validate="false"/>

</httpHandlers>

(in <system.web><httpHandlers>)

and

<handlers>

<remove name="Telerik_Web_UI_SpellCheckHandler_axd"/>

<remove name="Telerik_Web_UI_DialogHandler_aspx"/>

<remove name="Telerik_RadUploadProgressHandler_ashx"/>

<remove name="Telerik_Web_UI_WebResource_axd"/>

<add name="Telerik_Web_UI_WebResource_axd" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" preCondition="integratedMode"/>

<add name="Telerik_RadUploadProgressHandler_ashx" path="Telerik.RadUploadProgressHandler.ashx" type="Telerik.Web.UI.RadUploadProgressHandler" verb="*" preCondition="integratedMode"/>

<add name="ChartImage_axd" path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler" verb="*" preCondition="integratedMode"/>

<add name="Telerik_Web_UI_SpellCheckHandler_axd" path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" verb="*" preCondition="integratedMode"/>

<add name="Telerik_Web_UI_DialogHandler_aspx" path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" preCondition="integratedMode"/>

</handlers>

(in <system.webServer>)

I'm not sure if that offers any conclusions, but it is a workaround for now.

Cheers,

FRASER

answered on 10 Jul 2012, 02:43 PM

It is not working when the Silverlight not installed, only install Flash, it doesn't allow to select multiple files. but when installed Silverlight it allow to select multiple files but cause other issue as error message below:

"Microsoft JScript runtime error: Error while uploading, [HtmlPage_NotEnabled]
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.10411.0&File=System.Windows.Browser.dll&Key=HtmlPage_NotEnabled"

@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html xmlns="http://www.w3.org/1999/xhtml">

head id="Head1" runat="server">

/* Hide the fakeInput control */

.ruUploadProgress, li .ruCancel, li .ruRemove

{

visibility: visible;

}

li.ruUploading

{

height: 1px;

}

.RadUpload .ruFakeInput

{

display: none;

}

.ruUploadProgress, li .ruCancel, li .ruRemove

{

/*visibility: hidden;*/

}

li.ruUploading

{

height: 0px;

display: none;

}

.uloadImg

{

height: 400px;

width: 650px;

overflow-y: scroll;

border: 1px solid #CCCCCC;

}

.thumbNails

{

}

.thumbNails li

{

float: left;

list-style-type: none;

margin: 5px;

}

.submit

{

}

.myTest

{

}

.myTest li

{

padding: 0px 5px;

list-style-type: none;

float: left;

}

</style>

head>

body>

--<asp:ScriptManager ID="ScriptManager1" runat="server" />--%>

Telerik.Web.UI.RadAsyncUpload.Modules.Flash.isAvailable =

function ()

{

return false; };

</script>

<telerik:RadScriptManager runat="server">

</telerik:RadScriptManager>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

//<![CDATA[

var isDuplicateFile = false;

var $ = $telerik.$;

$().ready(

function () {

if (document.getElementById("imgContainer") == null)

'#RadAsyncUpload1').append($telerik.$('<div id="imgContainer" class="uloadImg">').append('<ul class="myTest">'));

});

function fileUploaded(sender, args) {

debugger;

//Truncate the name

if (isDuplicateFile == false) {

truncateName(args);

//Display the picture

// var $row = $telerik.$(args.get_row());

// var id = args.get_fileInfo().TempFileLocation;

// $row.append($telerik.$("</br><img width='180px' />")

// .attr("src", getImageUrl(id)));

// var $row = $telerik.$(args.get_row());

var id = args.get_fileInfo().TempFileLocation;

// var $thumbContainer = $('thumbNails');

// var $imgThumb = $telerik.$("<img width='180px' />").attr("src", getImageUrl(id));

// $('.thumbNails').append($telerik.$("<li>").append($telerik.$("<img width='180px' />").attr("src", getImageUrl(id))));

//var $myClass = $('myTestClass');

var $img = $telerik.$("<img height='120px' />").attr("src", getImageUrl(id));

var $row = $telerik.$(args.get_row());

$telerik.$($row).removeClass(

"ruUploading");

var id = args.get_fileInfo().TempFileLocation;

// if (document.getElementById("myTest") == null)

// $('#imgContainer').append($telerik.$('<ul id="myTest" >').append($row));

// else

// $('#myTest').append($row);

$row.find(

'.ruFileWrap').before($img).before("<br />");

'#imgContainer > ul').append($row);

}

//$('#RadAsyncUpload1').append($telerik.$("<ul>").append($row));

// $('myClass').append($ul);

// $('#myInput').append($telerik.$("<li>").append($telerik.$("<img width='180px' />").attr("src", getImageUrl(id))));

// $('#myInput').append($row);

}

function truncateName(args) {

var $span = $telerik.$(".ruUploadProgress", args.get_row());

var text = $span.text();

if (text.length > 16) {

var newString = text.substring(0, 16) + '...';

$span.text(newString);

}

function FileSelected(sender, args) { //Single file

debugger;

// var $row = $telerik.$(args.get_row());

// $row.addClass("ruUploading");

// var id = args.get_fileInfo().TempFileLocation;

// var $thumbContainer = $('#thumbNails');

// $thumbContainer.append($telerik.$("</br><img width='180px' />")

// .attr("src", getImageUrl(id)));

// for (var fileindex in sender._uploadedFiles) {

// if (sender._uploadedFiles[fileindex].fileInfo.FileName == args.get_fileName()) {

// isDuplicateFile = true;

// }

$telerik.$(args.get_row()).addClass(

"ruUploading");

isDuplicateFile =

false;

for (var fileindex in sender._uploadedFiles) {

//if (sender._uploadedFiles[fileindex].fileInfo.FileName == args.get_fileName()) {

if (sender._uploadedFiles[fileindex].fileInfo.FileName == args.get_row().innerText) {

isDuplicateFile =

true;

}

function getImageUrl(id) {

var url = window.location.href;

var handler = "StreamImage.ashx?TempFileLocation=" + id;

var index = url.lastIndexOf("/");

var completeUrl = url.substring(0, index + 1) + handler;

return completeUrl

}

function onClientFilesUploaded(sender, args) {

//var $btnSubmit = $("<%=btnSubmit.ClientID %>");

var filesCount = sender.getUploadedFiles().length;

if (filesCount > 0) {

'#btnSubmit').show();

'#btnCancel').show();

}

function DeleteFiles() {

var upload = $find("<%=RadAsyncUpload1.ClientID %>");

var inputFiles = upload.getUploadedFiles();

for (i = 0; i < inputFiles.length; i++)

upload.deleteFileInputAt(i);

//inputFiles.deleteAllFileInputs();

upload.updateClientState();

}

function FilesSelected(sender, args) { // Multiple Files

debugger;

}

function FileUploadRemoved(sender, args) {

debugger;

if (sender._uploadedFiles.length == 0) {

'#btnSubmit').hide();

'#btnCancel').hide();

}

//]]

</script>

</telerik:RadCodeBlock>

<div>

<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" HttpHandlerUrl="~/CustomHandler.ashx"

TemporaryFolder="TemporaryFolder" OnClientFileSelected="FileSelected" OnClientFilesUploaded="onClientFilesUploaded"

OnClientFileUploadRemoved="FileUploadRemoved" OnClientFilesSelected="FilesSelected"

UploadedFilesRendering="BelowFileInput" OnClientFileUploaded="fileUploaded" MultipleFileSelection="Automatic"

AllowedFileExtensions="jpeg,jpg,gif,png,bmp" Skin="Sunset">

</telerik:RadAsyncUpload>

<telerik:RadProgressArea runat="server" ID="RadProgressArea1">

</telerik:RadProgressArea>

</ul>

<br />

<asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClick="btnSubmit_Click"

Style="display: none" /> 

<asp:Button ID="btnCancel" runat="server" OnClientClick="DeleteFiles()" Text="Cancel"

OnClick="btnCancel_Click" Style="display: none" />

</div>

</form>

body>

html>