Hello.
When I put RadAsyncUpload inside div which will be used as popup for fancyBox or blockUi (jQuery plugin) after postback FileUploaded handler is not invoked. UploadedFiles collection is empty, although I see uploaded file in temp directory. OnClientFileUploaded is called properly. (case one and two)
When I put identical control on a page (outside popup) everything works fine. (case three)
I use ASP.NET 4.0, Telerik.Controls 2012.3.1308.45, fancyBox 2.0.4, blockUI (2.59.0), jQuery 1.8.2.
Same behaviour appears in Firefox 20.0.1, Chrome 23, IE10.
Any idea?
When I put RadAsyncUpload inside div which will be used as popup for fancyBox or blockUi (jQuery plugin) after postback FileUploaded handler is not invoked. UploadedFiles collection is empty, although I see uploaded file in temp directory. OnClientFileUploaded is called properly. (case one and two)
When I put identical control on a page (outside popup) everything works fine. (case three)
I use ASP.NET 4.0, Telerik.Controls 2012.3.1308.45, fancyBox 2.0.4, blockUI (2.59.0), jQuery 1.8.2.
Same behaviour appears in Firefox 20.0.1, Chrome 23, IE10.
<
script
src
=
"http://malsup.github.com/jquery.blockUI.js"
></
script
>
<
script
src
=
"http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.0.4/jquery.fancybox.pack.js"
></
script
>
<
h3
>Async upload cases:</
h3
>
<
ol
class
=
"round"
>
<
li
class
=
"one"
>
<
h5
>FancyBox</
h5
>
<
input
type
=
"button"
value
=
"Open"
onclick
=
"showFancyBox();"
/>
</
li
>
<
li
class
=
"two"
>
<
h5
>BlockUI</
h5
>
<
input
type
=
"button"
value
=
"Open"
onclick
=
"showBlockUI();"
/>
</
li
>
<
li
class
=
"three"
>
<
h5
>Direct</
h5
>
<
telerik:RadAsyncUpload
ID
=
"AsyncUpload3"
InputSize
=
"15"
runat
=
"server"
DisableChunkUpload
=
"true"
MaxFileInputsCount
=
"1"
OnFileUploaded
=
"HandleFileUploaded"
OnClientFileUploaded
=
"HandleClientFileUploaded"
>
<
FileFilters
>
<
telerik:FileFilter
Description
=
"Images(jpeg;jpg;gif;png)"
Extensions
=
"jpeg,jpg,gif,png"
/>
</
FileFilters
>
</
telerik:RadAsyncUpload
>
<
br
/>
<
input
value
=
"Upload"
type
=
"button"
onclick
=
"__doPostBack();"
/>
</
li
>
</
ol
>
<
div
style
=
"display: none;"
>
<
div
id
=
"Popup1"
style
=
"border: 4px solid blue; background: grey; width: 400px; height: 100px;"
>
<
telerik:RadAsyncUpload
ID
=
"AsyncUpload1"
InputSize
=
"15"
runat
=
"server"
DisableChunkUpload
=
"true"
MaxFileInputsCount
=
"1"
OnFileUploaded
=
"HandleFileUploaded"
OnClientFileUploaded
=
"HandleClientFileUploaded"
>
<
FileFilters
>
<
telerik:FileFilter
Description
=
"Images(jpeg;jpg;gif;png)"
Extensions
=
"jpeg,jpg,gif,png"
/>
</
FileFilters
>
</
telerik:RadAsyncUpload
>
<
input
value
=
"Upload"
type
=
"button"
onclick
=
"__doPostBack();"
/>
</
div
>
</
div
>
<
div
id
=
"Popup2"
style
=
"display: none; border: 4px solid blue; background: grey; width: 400px; height: 100px;"
>
<
telerik:RadAsyncUpload
ID
=
"AsyncUpload2"
InputSize
=
"15"
runat
=
"server"
DisableChunkUpload
=
"true"
MaxFileInputsCount
=
"1"
OnFileUploaded
=
"HandleFileUploaded"
OnClientFileUploaded
=
"HandleClientFileUploaded"
>
<
FileFilters
>
<
telerik:FileFilter
Description
=
"Images(jpeg;jpg;gif;png)"
Extensions
=
"jpeg,jpg,gif,png"
/>
</
FileFilters
>
</
telerik:RadAsyncUpload
>
<
input
value
=
"Upload"
type
=
"button"
onclick
=
"__doPostBack();"
/>
</
div
>
<script type=
"text/javascript"
>
function
HandleClientFileUploaded(sender, e) {
console.log(
"File uploaded: "
, e.get_fileName());
}
function
showBlockUI() {
$.blockUI({
message: $(
'#Popup2'
),
css: {
cursor:
null
,
border:
'none'
,
width:
'10px'
,
height:
'10px'
,
top: ($(window).height() - $(
'#Popup2'
).height()) / 2 +
'px'
,
left: ($(window).width() - $(
'#Popup2'
).width()) / 2 +
'px'
},
overlayCSS: { cursor:
null
},
focusInput:
false
});
}
function
showFancyBox() {
$.fancybox({
type:
'inline'
,
content: $(
'#Popup1'
)
});
}
</script>
Any idea?